@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');/* packages/frontend/src/components/layout/Header.module.css */
._header_1k7cj_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  height: var(--header-height, 60px);
  background-color: var(--bg-darker);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  box-sizing: border-box;
  flex-shrink: 0; /* Ensure header doesn't shrink */
  position: relative;
  z-index: 99990; /* Extremely high z-index to ensure header is above other elements */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow for better depth */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._headerLeft_1k7cj_21,
._headerCenter_1k7cj_22,
._headerRight_1k7cj_23 {
  display: flex;
  align-items: center;
}

._headerLeft_1k7cj_21 {
  flex: 1 0 0; /* Grow and shrink, basis 0 */
  justify-content: flex-start;
}

._headerCenter_1k7cj_22 {
  flex: 2 0 0; /* Takes more space, allow it to center content */
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 16px;
}

._recordingIndicator_1k7cj_41 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 36px;
}

._recordingIndicator_1k7cj_41 svg {
  width: 16px;
  height: 16px;
}

._mainNav_1k7cj_53 {
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
}

._navLink_1k7cj_59 {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

._navLink_1k7cj_59:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

:root[data-theme="light"] ._navLink_1k7cj_59 {
  color: var(--light-text-secondary);
}

:root[data-theme="light"] ._navLink_1k7cj_59:hover {
  color: var(--light-text-primary);
  background-color: var(--light-bg-hover);
}

._headerRight_1k7cj_23 {
  flex: 1 0 0;
  justify-content: flex-end;
  gap: var(--space-sm, 8px); /* Consistent spacing between elements */
  position: relative;
  z-index: 99999; /* Extremely high z-index to ensure it's above everything */
  margin-left: auto; /* Push to the right */
}

._appLogo_1k7cj_91 {
  color: var(--primary);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, filter 0.3s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

._appLogo_1k7cj_91 svg {
  width: 40px;
  height: 40px;
  display: block;
}

._appLogo_1k7cj_91:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

._appTitle_1k7cj_114 {
  font-size: 1.5rem;
  font-weight: 700; /* Use explicit weight instead of variable */
  margin: 0; /* Remove default h1 margin */
  color: var(--text-primary);
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.2;
}

/* Header button and icon standardization */
._chatToggle_1k7cj_129,
._themeToggle_1k7cj_130 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

._chatToggle_1k7cj_129:hover,
._themeToggle_1k7cj_130:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Standardize all header icons */
._chatToggle_1k7cj_129 svg,
._themeToggle_1k7cj_130 svg,
._headerRight_1k7cj_23 svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Container spacing standardization */
._themeToggleContainer_1k7cj_164,
._notificationsContainer_1k7cj_165,
._profileButtonContainer_1k7cj_166 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
}

/* Ensure consistent button sizing across all header elements */
._headerRight_1k7cj_23 > * {
  margin-left: 8px;
}

._headerRight_1k7cj_23 > *:first-child {
  margin-left: 0;
}

/* Fix any platform-specific button styling */
._chatToggle_1k7cj_129,
._themeToggleContainer_1k7cj_164 button,
._notificationsContainer_1k7cj_165 button,
._profileButtonContainer_1k7cj_166 button {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border-radius: 6px;
}

/* Ensure consistent icon sizing across all components */
._headerRight_1k7cj_23 svg,
._headerRight_1k7cj_23 ._lucide_1k7cj_198 {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2;
}

/* Platform-specific fixes for Mac */
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  ._appTitle_1k7cj_114 {
    font-weight: 600; /* Slightly lighter on high-DPI displays */
    letter-spacing: 0.25px; /* Tighter letter spacing on Mac */
  }

  ._header_1k7cj_2 {
    border-bottom-width: 0.5px; /* Thinner border on high-DPI */
  }
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
  ._chatToggle_1k7cj_129,
  ._themeToggleContainer_1k7cj_164 button,
  ._notificationsContainer_1k7cj_165 button {
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0); /* Force hardware acceleration */
  }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
  ._appTitle_1k7cj_114 {
    font-weight: 700; /* Maintain bold weight in Firefox */
  }
}

._projectSelector_1k7cj_233 {
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
  z-index: 100001;
  position: relative;
  height: 36px;
}

/* Ensure ProjectSelector button matches header styling */
._projectSelector_1k7cj_233 button {
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 36px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  box-sizing: border-box;
}

._projectSelector_1k7cj_233 svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Light theme overrides */
:root[data-theme="light"] ._header_1k7cj_2 {
  background-color: var(--bg-darker);
  border-bottom-color: var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] ._appLogo_1k7cj_91 {
  color: var(--primary);
}

/* Remove .nav as it's no longer used here */

/* Menu toggle removed */

._themeToggle_1k7cj_130, ._chatToggle_1k7cj_129 {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  width: 36px;
  height: 36px;
}

._themeToggle_1k7cj_130:hover, ._chatToggle_1k7cj_129:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
  border-color: var(--primary);
}

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

._themeToggleContainer_1k7cj_164 {
  display: flex;
  align-items: center;
  position: relative;
  pointer-events: auto;
  z-index: 10;
}

._notificationBellContainer_1k7cj_315,
._notificationsContainer_1k7cj_165 {
  display: flex;
  align-items: center;
  position: relative;
  pointer-events: auto;
  z-index: 10;
}

._tokenWidgetContainer_1k7cj_324 {
  display: flex;
  align-items: center;
  position: relative;
  pointer-events: auto;
  z-index: 10;
  margin: 0 4px;
}

._authStatusContainer_1k7cj_333 {
  display: flex;
  align-items: center;
  position: relative;
  pointer-events: auto;
  z-index: 10;
  margin-right: 8px;
}

._profileButtonContainer_1k7cj_166 {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99999; /* Extremely high z-index to ensure it's above everything */
}

._profileIcon_1k7cj_349 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-surface-3, #181a20);
  color: var(--text-primary, #f8f8f2);
  cursor: pointer;
  margin-left: 0.5rem;
  transition: all 0.2s ease;
}

._profileIcon_1k7cj_349:hover {
  background-color: var(--primary, #007acc);
}

/* Removed .authStatusContainer as it's not used in RealHeader */

/* Light theme menu toggle removed */

:root[data-theme="light"] ._themeToggle_1k7cj_130,
:root[data-theme="light"] ._chatToggle_1k7cj_129 {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

:root[data-theme="light"] ._themeToggle_1k7cj_130:hover,
:root[data-theme="light"] ._chatToggle_1k7cj_129:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}/* RealProfileDropdown.module.css - Theme-consistent styling for profile dropdown */

._profileButtonContainer_kj0sp_3 {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99999;
}

._profileButton_kj0sp_3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm, 14px);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  height: 36px;
  min-width: 120px;
  justify-content: flex-start;
}

._profileButton_kj0sp_3:hover {
  background-color: var(--bg-hover);
  border-color: var(--primary);
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
}

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

._profileButton_kj0sp_3:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

._profileAvatar_kj0sp_47 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-semibold, 600);
  font-size: 12px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--border-color);
  transition: all 0.2s ease;
}

._profileAvatar_kj0sp_47:hover {
  border-color: var(--primary);
  transform: scale(1.05);
}

._profileAvatarImage_kj0sp_70 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

._profileAvatarInitials_kj0sp_78 {
  font-size: 12px;
  font-weight: var(--font-weight-semibold, 600);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark, #0056b3));
}

._profileLoading_kj0sp_92 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

._profileSpinner_kj0sp_100 {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: _spin_kj0sp_1 1s linear infinite;
}

._loginButton_kj0sp_109 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  border-radius: var(--radius-md, 8px);
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: white;
  cursor: pointer;
  font-size: var(--font-size-sm, 14px);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  height: 36px;
}

._loginButton_kj0sp_109:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
}

/* Dropdown styles */
._profileDropdown_kj0sp_133 {
  position: fixed;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.15));
  padding: var(--space-md, 16px);
  min-width: 200px;
  z-index: 100000;
  backdrop-filter: blur(8px);
  animation: _fadeIn_kj0sp_1 0.2s ease;
}

._dropdownHeader_kj0sp_146 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding-bottom: var(--space-sm, 8px);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-sm, 8px);
}

._dropdownHeaderAvatar_kj0sp_155 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-semibold, 600);
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--border-color);
}

._dropdownHeaderAvatarImage_kj0sp_172 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

._dropdownHeaderAvatarInitials_kj0sp_180 {
  font-size: 16px;
  font-weight: var(--font-weight-semibold, 600);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark, #0056b3));
}

._dropdownHeaderInfo_kj0sp_194 {
  flex: 1;
  min-width: 0;
}

._dropdownName_kj0sp_199 {
  font-size: var(--font-size-md, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
  margin-bottom: var(--space-xs, 4px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._dropdownEmail_kj0sp_209 {
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._dropdownTokens_kj0sp_217 {
  margin-top: var(--space-xs, 4px);
}

._tokensBalance_kj0sp_221 {
  font-size: var(--font-size-xs, 12px);
  color: var(--primary);
  font-weight: var(--font-weight-medium, 500);
  display: flex;
  align-items: center;
  gap: 4px;
}

._tokensLoading_kj0sp_230 {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-secondary);
  font-style: italic;
}

._dropdownSection_kj0sp_236 {
  margin-bottom: var(--space-sm, 8px);
}

._dropdownSection_kj0sp_236:last-child {
  margin-bottom: 0;
}

._dropdownItem_kj0sp_244 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  width: 100%;
  padding: var(--space-sm, 8px);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 14px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

._dropdownItem_kj0sp_244:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

._dropdownItem_kj0sp_244._logout_kj0sp_265 {
  color: var(--error, #ef4444);
}

._dropdownItem_kj0sp_244._logout_kj0sp_265:hover {
  background-color: var(--error-alpha, rgba(239, 68, 68, 0.1));
  color: var(--error);
}

/* Animations */
@keyframes _spin_kj0sp_1 {
  to {
    transform: rotate(360deg);
  }
}

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

/* Light theme overrides */
:root[data-theme="light"] ._profileButton_kj0sp_3 {
  border-color: var(--border-color);
  color: var(--text-primary);
}

:root[data-theme="light"] ._profileButton_kj0sp_3:hover {
  background-color: var(--bg-hover);
  border-color: var(--primary);
}

:root[data-theme="light"] ._profileDropdown_kj0sp_133 {
  background-color: var(--bg-darker);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.1));
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  ._profileButton_kj0sp_3 {
    border-width: 2px;
  }

  ._profileButton_kj0sp_3:focus {
    box-shadow: 0 0 0 3px var(--primary);
  }

  ._profileDropdown_kj0sp_133 {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  ._profileButton_kj0sp_3,
  ._dropdownItem_kj0sp_244,
  ._profileDropdown_kj0sp_133 {
    transition: none;
  }

  ._profileSpinner_kj0sp_100 {
    animation: none;
  }

  ._profileDropdown_kj0sp_133 {
    animation: none;
  }
}
/* Accent Color Picker Styles */

.accent-color-picker {
  padding: 16px;
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 16px 0;
  width: 100%;
}

.accent-color-picker-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.accent-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  padding: 0;
}

.color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.color-option.selected {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.color-selected-indicator {
  color: white;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.custom-color-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.custom-color-input label {
  color: var(--text-secondary);
  font-size: 12px;
}

.custom-color-input input[type="color"] {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  padding: 0;
}

.custom-color-input input[type="text"] {
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  width: 80px;
  font-family: monospace;
}

.custom-color-input input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

/* Animation for color picker appearance */
@keyframes color-picker-appear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accent-color-picker {
  animation: color-picker-appear 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .accent-color-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .custom-color-input {
    flex-wrap: wrap;
  }
}
/* ThemeToggle.module.css - Theme-consistent styling for ThemeToggle component */

._themeToggleContainer_1q5dm_3 {
  display: flex;
  align-items: center;
  position: relative;
  pointer-events: auto;
  z-index: 10;
}

._themeToggleButton_1q5dm_11 {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  width: 36px;
  height: 36px;
  position: relative;
}

._themeToggleButton_1q5dm_11:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
  border-color: var(--primary);
}

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

._themeToggleIcon_1q5dm_42 {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

._themeToggleIcon_1q5dm_42._dark_1q5dm_49 {
  transform: rotate(0deg);
}

._themeToggleIcon_1q5dm_42._light_1q5dm_53 {
  transform: rotate(180deg);
}

/* Theme previews dropdown */
._themePreviews_1q5dm_58 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.15));
  padding: var(--space-md, 16px);
  min-width: 200px;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

._themePreviewsTitle_1q5dm_72 {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
  margin-bottom: var(--space-sm, 8px);
  text-align: center;
}

._themePreviewsGrid_1q5dm_80 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-md, 16px);
}

._themePreviewsActions_1q5dm_87 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-sm, 8px);
}

._themeActionButton_1q5dm_95 {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 14px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

._themeActionButton_1q5dm_95:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

._colorSwatch_1q5dm_115 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}

/* Theme presets panel */
._themePresetsPanel_1q5dm_123 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.15));
  padding: var(--space-md, 16px);
  min-width: 250px;
  max-width: 300px;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

/* Accent color panel */
._themeAccentPanel_1q5dm_139 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.15));
  padding: var(--space-md, 16px);
  min-width: 200px;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

._themePanelHeader_1q5dm_153 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md, 16px);
}

._themePanelHeader_1q5dm_153 h3 {
  margin: 0;
  font-size: var(--font-size-md, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
}

._themePanelClose_1q5dm_167 {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 4px);
  transition: all 0.2s ease;
}

._themePanelClose_1q5dm_167:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* Light theme overrides */
:root[data-theme="light"] ._themeToggleButton_1q5dm_11 {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

:root[data-theme="light"] ._themeToggleButton_1q5dm_11:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--primary);
}

:root[data-theme="light"] ._themePreviews_1q5dm_58,
:root[data-theme="light"] ._themePresetsPanel_1q5dm_123,
:root[data-theme="light"] ._themeAccentPanel_1q5dm_139 {
  background-color: var(--bg-darker);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.1));
}

/* Animation for smooth theme transitions */
@media (prefers-reduced-motion: no-preference) {
  ._themeToggleIcon_1q5dm_42 svg {
    transition: transform 0.3s ease;
  }
  
  ._themeToggleButton_1q5dm_11 {
    transition: all 0.2s ease;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  ._themeToggleButton_1q5dm_11 {
    border-width: 2px;
  }
  
  ._themeToggleButton_1q5dm_11:focus {
    box-shadow: 0 0 0 3px var(--primary);
  }
}
/* ProjectSelector.module.css - Theme-consistent styling for project selector */

._projectSelectorWrapper_x3wqq_3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
}

._projectSelectorContainer_x3wqq_9 {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 10000;
}

._projectButton_x3wqq_16 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-color);
  background: var(--bg-surface, transparent);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  height: 36px;
  min-width: 180px;
  max-width: 220px;
  justify-content: flex-start;
  white-space: nowrap;
}

._projectButton_x3wqq_16:hover {
  background-color: var(--bg-hover);
  border-color: var(--primary);
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
}

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

/* Enhanced open state styling */
._projectButton_x3wqq_16._open_x3wqq_51 {
  background-color: var(--bg-hover);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

._projectIcon_x3wqq_57 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

._projectName_x3wqq_64 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

._dropdownIcon_x3wqq_72 {
  width: 12px;
  height: 12px;
  margin-left: auto;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

._projectButton_x3wqq_16._open_x3wqq_51 ._dropdownIcon_x3wqq_72 {
  transform: rotate(180deg);
  color: var(--primary);
}

/* Enhanced hover state for better feedback */
._projectButton_x3wqq_16:hover ._dropdownIcon_x3wqq_72 {
  color: var(--text-primary);
}

._loadingContainer_x3wqq_91 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 14px);
}

._loadingSpinner_x3wqq_100 {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: _spin_x3wqq_1 1s linear infinite;
}

._createButton_x3wqq_109 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: white;
  cursor: pointer;
  font-size: var(--font-size-sm, 14px);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  height: 36px;
}

._createButton_x3wqq_109:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
}

/* Dropdown styles */
._dropdown_x3wqq_72 {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  background-color: #1a1a1a !important;
  border: 2px solid #6366f1 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8) !important;
  z-index: 999999 !important;
  min-width: 280px !important;
  max-width: 320px !important;
  max-height: 420px !important;
  overflow: hidden !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Enhanced dropdown animation */
@keyframes _dropdownSlideIn_x3wqq_1 {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes _fadeIn_x3wqq_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._dropdownHeader_x3wqq_173 {
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color-light, var(--border-color));
  background-color: var(--bg-surface-1, var(--bg-light));
  letter-spacing: 0.025em;
}

._dropdownContent_x3wqq_183 {
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-xs, 4px) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

/* Custom scrollbar for webkit browsers */
._dropdownContent_x3wqq_183::-webkit-scrollbar {
  width: 6px;
}

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

._dropdownContent_x3wqq_183::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 3px;
}

._dropdownContent_x3wqq_183::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-secondary);
}

._projectItem_x3wqq_209 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid var(--border-color-light, rgba(255, 255, 255, 0.05));
  margin: 0 var(--space-xs, 4px);
  border-radius: var(--radius-sm, 6px);
  border-bottom: none;
  margin-bottom: var(--space-xs, 2px);
}

._projectItem_x3wqq_209:hover {
  background-color: var(--bg-hover, rgba(255, 255, 255, 0.08));
  transform: translateX(2px);
}

._projectItem_x3wqq_209._active_x3wqq_228 {
  background-color: var(--primary-alpha, rgba(0, 123, 255, 0.15));
  color: var(--primary);
  border-left: 3px solid var(--primary);
  padding-left: calc(var(--space-lg, 16px) - 3px);
}

._projectItem_x3wqq_209:last-child {
  margin-bottom: 0;
}

._projectItemIcon_x3wqq_239 {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

._projectItemContent_x3wqq_246 {
  flex: 1;
  min-width: 0;
}

._projectItemName_x3wqq_251 {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-primary);
  margin-bottom: 2px;
  line-height: 1.4;
}

._projectItemMeta_x3wqq_259 {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-secondary);
  opacity: 0.8;
  line-height: 1.3;
}

._projectItemCheck_x3wqq_266 {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

._createProjectItem_x3wqq_273 {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  cursor: pointer;
  transition: all 0.15s ease;
  border-top: 1px solid var(--border-color-light, var(--border-color));
  color: var(--primary);
  font-weight: var(--font-weight-medium, 500);
  margin: var(--space-xs, 4px);
  margin-top: var(--space-sm, 8px);
  border-radius: var(--radius-sm, 6px);
  border-top: none;
  background-color: var(--bg-surface-1, rgba(255, 255, 255, 0.02));
}

._createProjectItem_x3wqq_273:hover {
  background-color: var(--primary-alpha, rgba(0, 123, 255, 0.15));
  transform: translateX(2px);
}

._createIcon_x3wqq_295 {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

/* Animations */
@keyframes _spin_x3wqq_1 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes _fadeIn_x3wqq_1 {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Light theme overrides */
:root[data-theme="light"] ._projectButton_x3wqq_16 {
  border-color: var(--border-color);
  color: var(--text-primary);
  background-color: var(--bg-surface, white);
}

:root[data-theme="light"] ._projectButton_x3wqq_16:hover {
  background-color: var(--bg-hover);
  border-color: var(--primary);
}

:root[data-theme="light"] ._dropdown_x3wqq_72 {
  background-color: var(--bg-surface-2, white);
  border-color: var(--border-color);
  box-shadow: var(--shadow-xl, 0 12px 24px rgba(0, 0, 0, 0.15));
}

:root[data-theme="light"] ._dropdownHeader_x3wqq_173 {
  background-color: var(--bg-surface-1, #f8f9fa);
}

:root[data-theme="light"] ._projectItem_x3wqq_209:hover {
  background-color: var(--bg-hover, #f1f3f4);
}

:root[data-theme="light"] ._createProjectItem_x3wqq_273 {
  background-color: var(--bg-surface-1, #f8f9fa);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  ._projectButton_x3wqq_16 {
    border-width: 2px;
  }
  
  ._projectButton_x3wqq_16:focus {
    box-shadow: 0 0 0 3px var(--primary);
  }
  
  ._dropdown_x3wqq_72 {
    border-width: 2px;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  ._projectButton_x3wqq_16 {
    min-width: 140px;
    max-width: 180px;
  }

  ._dropdown_x3wqq_72 {
    min-width: 260px;
    max-width: 300px;
    left: -20px;
    right: -20px;
  }
}

@media (max-width: 480px) {
  ._projectButton_x3wqq_16 {
    min-width: 120px;
    max-width: 160px;
    font-size: var(--font-size-xs, 13px);
  }

  ._dropdown_x3wqq_72 {
    min-width: 240px;
    max-width: 280px;
    left: -40px;
    right: -40px;
  }

  ._projectItemName_x3wqq_251 {
    font-size: var(--font-size-xs, 13px);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  ._projectButton_x3wqq_16,
  ._projectItem_x3wqq_209,
  ._createProjectItem_x3wqq_273,
  ._dropdown_x3wqq_72 {
    transition: none;
  }

  ._loadingSpinner_x3wqq_100 {
    animation: none;
  }

  ._dropdown_x3wqq_72 {
    animation: none;
  }

  ._dropdownIcon_x3wqq_72 {
    transition: none;
  }
}

/* Taxonomy Information Styles */
._projectItemMeta_x3wqq_259 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

._kitBadge_x3wqq_428 {
  background: rgba(var(--accent-color-rgb, 0, 123, 255), 0.1);
  color: var(--accent-color, #007bff);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid rgba(var(--accent-color-rgb, 0, 123, 255), 0.2);
}

._defaultBadge_x3wqq_438 {
  background: linear-gradient(135deg, var(--primary-color, #007bff), var(--accent-color, #28a745));
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 8px;
}

._projectItemPipeline_x3wqq_448 {
  font-size: 0.75rem;
  color: var(--text-color-secondary, #6c757d);
  margin-top: 2px;
  opacity: 0.8;
}
.notification-bell-container {
  position: relative;
  display: inline-block;
}

.notification-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.notification-bell:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
  border-color: var(--primary);
}

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

/* Light theme specific styles */
:root[data-theme="light"] .notification-bell {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

:root[data-theme="light"] .notification-bell:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* Spin animation for refresh indicator */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: var(--error, #f44336);
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(25%, -25%);
}

.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: var(--z-index-notification, 9999);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.notification-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.dark .notification-header {
  border-bottom: 1px solid var(--border-color, #333);
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.mark-all-read {
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.mark-all-read:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .mark-all-read:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.notification-list {
  overflow-y: auto;
  max-height: 350px;
}

.notification-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: background-color 0.2s ease;
}

.dark .notification-item {
  border-bottom: 1px solid var(--border-color, #333);
}

.notification-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.dark .notification-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.notification-item.unread {
  background-color: rgba(0, 120, 212, 0.05);
}

.dark .notification-item.unread {
  background-color: rgba(0, 120, 212, 0.1);
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.notification-message {
  font-size: 13px;
  color: var(--text-secondary, #666666);
  margin-bottom: 4px;
}

.dark .notification-message {
  color: var(--text-secondary, #a6adc8);
}

.notification-time {
  font-size: 11px;
  color: var(--text-tertiary, #999999);
}

.dark .notification-time {
  color: var(--text-tertiary, #6c7086);
}

.dismiss-notification {
  background: none;
  border: none;
  color: var(--text-tertiary, #999999);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.dismiss-notification:hover {
  opacity: 1;
}

.empty-notifications {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-secondary, #666666);
  font-size: 14px;
}

.dark .empty-notifications {
  color: var(--text-secondary, #a6adc8);
}

/* Notification Actions */
.notification-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.notification-actions button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  min-height: 36px;
  position: relative;
  overflow: hidden;
}

.notification-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.notification-actions button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.notification-actions .accept-button {
  background: linear-gradient(135deg, var(--success, #28a745) 0%, #20c997 100%);
  color: white;
  border: 1px solid transparent;
  flex: 1;
}

.notification-actions .accept-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.notification-actions .accept-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.notification-actions .decline-button {
  background: transparent;
  color: var(--error, #dc3545);
  border: 1px solid var(--error, #dc3545);
  flex: 1;
}

.notification-actions .decline-button:hover:not(:disabled) {
  background: var(--error, #dc3545);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.notification-actions .decline-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* Processing state */
.notification-actions button.processing {
  background: var(--bg-surface-3, #6c757d) !important;
  color: white !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading animation for processing buttons */
.notification-actions button.processing svg {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Generic notification action buttons */
.notification-actions .notification-action {
  background: var(--primary, #007acc);
  color: white;
  border: 1px solid transparent;
}

.notification-actions .notification-action.secondary {
  background: transparent;
  color: var(--primary, #007acc);
  border: 1px solid var(--primary, #007acc);
}

.notification-actions .notification-action.secondary:hover:not(:disabled) {
  background: var(--primary, #007acc);
  color: white;
}

.notification-actions .notification-action:hover:not(:disabled) {
  background: var(--primary-hover, #0056b3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.4);
}

/* Icon styling in buttons */
.notification-actions button svg {
  width: 14px;
  height: 14px;
}

/* Notification icon styling */
.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* Priority indicators */
.notification-item.priority-high {
  border-left: 3px solid var(--error, #dc3545);
}

.notification-item.priority-urgent {
  border-left: 3px solid var(--warning, #ffc107);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* Notification grouping */
.notification-group {
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.notification-group-header {
  padding: 8px 16px;
  background: var(--bg-surface-1, #f8f9fa);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #666666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dark .notification-group-header {
  background: var(--bg-surface-1, #2a2a2a);
  color: var(--text-secondary, #a6adc8);
}

/* Responsive design */
@media (max-width: 480px) {
  .notification-dropdown {
    width: 280px;
    right: -20px;
  }

  .notification-actions {
    flex-direction: column;
    gap: 6px;
  }

  .notification-actions button {
    width: 100%;
    justify-content: center;
  }
}
/* GlobalRecordingIndicator.css */

.global-recording-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  color: #dc2626;
  user-select: none;
  max-width: 400px;
  min-width: 200px;
}

.global-recording-indicator:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

/* Recording pulse animation */
.recording-pulse {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recording-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: rgba(239, 68, 68, 0.3);
  border-radius: 50%;
  animation: recording-pulse 2s infinite;
}

.recording-icon {
  width: 16px;
  height: 16px;
  color: #dc2626;
  z-index: 1;
  position: relative;
}

@keyframes recording-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Recording info */
.recording-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.recording-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recording-label {
  font-weight: 600;
  font-size: 0.75rem;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.recording-duration {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: #dc2626;
}

.duration-icon {
  width: 12px;
  height: 12px;
}

.recording-details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}

.recording-title {
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.participant-count {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
  white-space: nowrap;
}

.participants-icon {
  width: 12px;
  height: 12px;
}

.navigate-icon {
  width: 14px;
  height: 14px;
  color: #6b7280;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.global-recording-indicator:hover .navigate-icon {
  opacity: 1;
  color: #dc2626;
}

/* Dark theme */
.global-recording-indicator.dark {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.global-recording-indicator.dark:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.global-recording-indicator.dark .recording-pulse::before {
  background: rgba(248, 113, 113, 0.4);
}

.global-recording-indicator.dark .recording-icon {
  color: #f87171;
}

.global-recording-indicator.dark .recording-label {
  color: #f87171;
  background: rgba(248, 113, 113, 0.2);
}

.global-recording-indicator.dark .recording-duration {
  color: #f87171;
}

.global-recording-indicator.dark .recording-title {
  color: #e5e7eb;
}

.global-recording-indicator.dark .participant-count {
  color: #9ca3af;
}

.global-recording-indicator.dark .navigate-icon {
  color: #9ca3af;
}

.global-recording-indicator.dark:hover .navigate-icon {
  color: #f87171;
}

/* Responsive design */
@media (max-width: 768px) {
  .global-recording-indicator {
    padding: 6px 12px;
    gap: 8px;
    min-width: 160px;
    max-width: 280px;
  }

  .recording-info {
    gap: 2px;
  }

  .recording-details {
    font-size: 0.7rem;
  }

  .recording-title {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .global-recording-indicator {
    padding: 4px 8px;
    gap: 6px;
    min-width: 120px;
    max-width: 200px;
  }

  .recording-pulse::before {
    width: 20px;
    height: 20px;
  }

  .recording-icon {
    width: 14px;
    height: 14px;
  }

  .recording-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .recording-title {
    max-width: 80px;
  }
}
/* packages/frontend/src/components/layout/Sidebar.module.css */
._sidebar_xzil4_2 {
  /* width controlled by ResizablePanel */
  background-color: var(--bg-surface-2);
  padding: var(--space-md);
  color: var(--text-primary);
  overflow: hidden; /* Hide content when collapsed or resizing */
  box-sizing: border-box;
  display: flex; /* To make children like title/nav stack vertically */
  flex-direction: column;
  position: relative;
  z-index: 2; /* Lower than ActivityBar (4) but higher than content (1) */
  height: 100%; /* Ensure it takes full height */
  width: 100%; /* Take full width of parent */
  min-width: 0; /* Allow content to shrink */
  border-right: 1px solid var(--border-color);
}

._open_xzil4_19 {
  visibility: visible;
  opacity: 1;
  border-right: 1px solid var(--border-color);
}

._closed_xzil4_25 {
  visibility: hidden; /* Use visibility instead of display:none to maintain animation */
  opacity: 0;
  border-right: none;
  padding: 0 !important;
}

._sidebarContent_xzil4_32 {
  flex-grow: 1;
  overflow-y: auto; /* If content within sidebar needs to scroll */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Custom Scrollbar Styles */
._sidebarContent_xzil4_32::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

._sidebarContent_xzil4_32::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: calc(var(--scrollbar-width) / 2);
}

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

._menuTitle_xzil4_55 {
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-sm) calc(var(--space-md) * -1); /* Align with link text */
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-md);
  flex-shrink: 0; /* Keep title visible */
}

._nav_xzil4_68 {
  flex-grow: 1;
}

._nav_xzil4_68 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

._navItem_xzil4_78 {
  display: flex; /* For icon alignment */
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  white-space: nowrap; /* Prevent text wrapping during resize */
  overflow: hidden; /* Hide text if too narrow */
  text-overflow: ellipsis;
  margin-bottom: var(--space-xs);
  cursor: pointer;
}

._navItem_xzil4_78:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

._activeNavItem_xzil4_99 {
  color: var(--primary) !important;
  font-weight: var(--font-weight-medium);
  background-color: var(--primary-light) !important;
}

._navItemIcon_xzil4_105 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Keep icon visible */
  width: 20px;
  height: 20px;
  font-size: 1.1rem;
}

._emptyState_xzil4_115 {
  padding: var(--space-md);
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
}

/* Light theme overrides */
:root[data-theme="light"] ._sidebar_xzil4_2 {
  background-color: var(--bg-surface-2-light);
  border-right: 1px solid var(--border-color-light);
}

:root[data-theme="light"] ._menuTitle_xzil4_55 {
  color: var(--text-secondary);
  border-bottom-color: var(--border-color);
}

:root[data-theme="light"] ._navItem_xzil4_78:hover {
  background-color: var(--bg-hover);
}

:root[data-theme="light"] ._activeNavItem_xzil4_99 {
  background-color: var(--bg-selected);
}/* codebase/packages/frontend/src/components/sidebar/ToolPanelContent.css */
.tool-panel-content {
  padding: var(--space-md, 12px);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--vscode-sideBar-background, #252526);
  color: var(--vscode-sideBar-foreground, #cccccc);
  box-sizing: border-box;
  min-height: 0; /* Allow content to shrink */
  min-width: 0; /* Allow content to shrink */
  overflow: hidden;
  flex: 1;
  will-change: contents; /* Optimize for content changes */
}

.tool-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md, 12px);
  padding-bottom: var(--space-sm, 8px);
  border-bottom: 1px solid var(--vscode-sideBar-border, #303030);
  width: 100%;
  flex-shrink: 0; /* Don't allow header to shrink */
  overflow: hidden;
}

.tool-panel-header h3 {
  margin: 0;
  font-size: var(--font-size-lg, 16px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.tool-panel-close {
  background: none;
  border: none;
  color: var(--vscode-icon-foreground, #cccccc);
  cursor: pointer;
  padding: 0 var(--space-xs, 4px);
  line-height: 1;
  opacity: 0.7;
  flex-shrink: 0; /* Don't allow button to shrink */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.tool-panel-close:hover {
  opacity: 1;
  color: var(--vscode-list-hoverForeground, #ffffff);
  background-color: var(--vscode-toolbar-hoverBackground, rgba(255, 255, 255, 0.1));
}

.tool-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1; /* Take all available space */
  width: 100%;
  box-sizing: border-box;
  min-height: 0; /* Allow content to shrink */
  min-width: 0; /* Allow content to shrink */
}

.tool-panel-item {
  display: flex;
  align-items: center;
  padding: var(--space-sm, 8px);
  margin-bottom: var(--space-xs, 4px);
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  transition: background-color 0.1s ease;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.tool-panel-item:hover {
  background-color: var(--vscode-list-hoverBackground, #2a2d2e);
  color: var(--vscode-list-hoverForeground, #ffffff);
}

.tool-panel-icon {
  margin-right: var(--space-sm, 8px);
  font-size: var(--font-size-lg, 16px);
  display: inline-block;
  width: 20px; /* Align icons */
  text-align: center;
  flex-shrink: 0; /* Don't allow icon to shrink */
}

.tool-panel-label {
  font-size: var(--font-size-md, 13px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  min-width: 0;
  flex: 1;
  box-sizing: border-box;
}

.tool-panel-separator {
  margin: var(--space-sm, 8px) 0;
  padding: 0;
  list-style: none;
}

.tool-panel-separator hr {
  border: none;
  height: 1px;
  background-color: var(--vscode-sideBar-border, #303030);
  margin: 0;
}

/* Empty state styling */
.tool-panel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg, 16px);
  text-align: center;
  color: var(--vscode-descriptionForeground, #8c8c8c);
  height: 100%;
  min-height: 150px;
}

.tool-panel-empty-state p {
  margin-bottom: var(--space-md, 12px);
}

.tool-panel-link-button {
  background-color: var(--vscode-button-background, #0e639c);
  color: var(--vscode-button-foreground, #ffffff);
  border: none;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  font-size: var(--font-size-sm, 12px);
  transition: background-color 0.2s ease;
}

.tool-panel-link-button:hover {
  background-color: var(--vscode-button-hoverBackground, #1177bb);
}

.tool-panel-empty {
  color: var(--vscode-descriptionForeground, #888888);
  padding: var(--space-md, 12px);
  font-style: italic;
}

/* Light Theme Adjustments */
:root[data-theme="light"] .tool-panel-content {
  background-color: var(--vscode-sideBar-background-light, #f3f3f3);
  color: var(--vscode-sideBar-foreground-light, #333333);
}

:root[data-theme="light"] .tool-panel-header {
  border-bottom-color: var(--vscode-sideBar-border-light, #e7e7e7);
}

:root[data-theme="light"] .tool-panel-close {
  color: var(--vscode-icon-foreground-light, #4f4f4f);
}

:root[data-theme="light"] .tool-panel-close:hover {
  color: var(--vscode-list-hoverForeground-light, #202124);
  background-color: var(--vscode-toolbar-hoverBackground-light, rgba(0, 0, 0, 0.1));
}

:root[data-theme="light"] .tool-panel-item:hover {
  background-color: var(--vscode-list-hoverBackground-light, #e8e8e8);
  color: var(--vscode-list-hoverForeground-light, #202124);
}

:root[data-theme="light"] .tool-panel-empty {
  color: var(--vscode-descriptionForeground-light, #777777);
}

:root[data-theme="light"] .tool-panel-empty-state {
  color: var(--vscode-descriptionForeground-light, #777777);
}

:root[data-theme="light"] .tool-panel-link-button {
  background-color: var(--vscode-button-background-light, #0078d4);
  color: var(--vscode-button-foreground-light, #ffffff);
}

:root[data-theme="light"] .tool-panel-link-button:hover {
  background-color: var(--vscode-button-hoverBackground-light, #106ebe);
}

:root[data-theme="light"] .tool-panel-separator hr {
  background-color: var(--vscode-sideBar-border-light, #e7e7e7);
}._workspaceManager_149lh_1 {
  display: flex;
  flex-direction: column;
  /* Use height: 100% to fill available space from CSS Grid */
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%; /* Ensure it doesn't exceed parent container */
  width: 100%;
  overflow: hidden; /* Prevent overflow, let child components handle scrolling */
  position: relative;
  background-color: var(--bg-surface-1, #1e1e1e);
  /* Higher z-index to ensure it appears above HomeView */
  z-index: 10;
}

/* Light theme overrides */
:root[data-theme="light"] ._workspaceManager_149lh_1 {
  background-color: var(--bg-surface-1-light, #ffffff);
}
._button_1dm3w_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  border: none;
  outline: none;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
}

/* Button sizes */
._small_1dm3w_19 {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 4px;
}

._medium_1dm3w_26 {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

._large_1dm3w_32 {
  height: 44px;
  padding: 0 20px;
  font-size: 16px;
}

/* Button variants */
._primary_1dm3w_39 {
  background-color: var(--primary, #ff7b00);
  color: white;
}

._primary_1dm3w_39:hover:not(:disabled) {
  background-color: var(--primary-light, #ff9533);
}

._primary_1dm3w_39:active:not(:disabled) {
  background-color: var(--primary-dark, #cc6200);
}

._secondary_1dm3w_52 {
  background-color: var(--bg-medium, #292938);
  color: var(--text-primary, #ffffff);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
}

._secondary_1dm3w_52:hover:not(:disabled) {
  background-color: var(--bg-hover, #353548);
}

._secondary_1dm3w_52:active:not(:disabled) {
  background-color: var(--bg-active, #4a4a6a);
}

._danger_1dm3w_66 {
  background-color: var(--error, #dc3545);
  color: white;
}

._danger_1dm3w_66:hover:not(:disabled) {
  background-color: #c82333;
}

._danger_1dm3w_66:active:not(:disabled) {
  background-color: #bd2130;
}

._ghost_1dm3w_79 {
  background-color: transparent;
  color: var(--text-primary, #ffffff);
}

._ghost_1dm3w_79:hover:not(:disabled) {
  background-color: var(--bg-hover, #353548);
}

._ghost_1dm3w_79:active:not(:disabled) {
  background-color: var(--bg-active, #4a4a6a);
}

._link_1dm3w_92 {
  background-color: transparent;
  color: var(--primary, #ff7b00);
  padding: 0;
  height: auto;
  text-decoration: none;
}

._link_1dm3w_92:hover:not(:disabled) {
  text-decoration: underline;
}

._icon_1dm3w_104 {
  background-color: transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
}

._icon_1dm3w_104:hover:not(:disabled) {
  background-color: var(--bg-hover, #353548);
  color: var(--text-primary, #ffffff);
}

._icon_1dm3w_104:active:not(:disabled) {
  background-color: var(--bg-active, #4a4a6a);
}

._icon_1dm3w_104._small_1dm3w_19 {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

._icon_1dm3w_104._large_1dm3w_32 {
  width: 36px;
  height: 36px;
  min-width: 36px;
}

._filter_1dm3w_135 {
  background-color: var(--bg-medium, #292938);
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  position: relative;
}

._filter_1dm3w_135:hover:not(:disabled) {
  background-color: var(--bg-hover, #353548);
  color: var(--text-primary, #ffffff);
}

._filter_1dm3w_135._active_1dm3w_147 {
  background-color: var(--primary, #ff7b00);
  color: white;
  border-color: var(--primary, #ff7b00);
}

._toggle_1dm3w_153 {
  background-color: var(--bg-medium, #292938);
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
}

._toggle_1dm3w_153:hover:not(:disabled) {
  background-color: var(--bg-hover, #353548);
  color: var(--text-primary, #ffffff);
}

._toggle_1dm3w_153._active_1dm3w_147 {
  background-color: var(--primary, #ff7b00);
  color: white;
  border-color: var(--primary, #ff7b00);
}

/* Full width button */
._fullWidth_1dm3w_171 {
  width: 100%;
}

/* Active state */
._active_1dm3w_147 {
  background-color: var(--primary, #ff7b00) !important;
  color: white !important;
  border-color: var(--primary, #ff7b00) !important;
}

/* Badge */
._badge_1dm3w_183 {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--primary, #ff7b00);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Disabled state */
._button_1dm3w_1:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading state */
._loading_1dm3w_208 {
  color: transparent !important;
}

._spinner_1dm3w_212 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  animation: _spin_1dm3w_212 1s linear infinite;
}

._spinner_1dm3w_212 svg {
  width: 100%;
  height: 100%;
}

._spinner_1dm3w_212 circle {
  opacity: 0.25;
}

._spinner_1dm3w_212 circle:nth-child(1) {
  opacity: 1;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: _dash_1dm3w_1 1.5s ease-in-out infinite;
}

/* Icon positioning */
._iconLeft_1dm3w_239 {
  margin-right: 8px;
  display: flex;
  align-items: center;
}

._iconRight_1dm3w_245 {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

/* Light theme overrides */
:root[data-theme="light"] ._secondary_1dm3w_52 {
  background-color: var(--bg-medium, #e8e8f0);
  color: var(--text-primary, #1e1e2e);
  border-color: var(--border-color, rgba(30, 30, 46, 0.15));
}

:root[data-theme="light"] ._secondary_1dm3w_52:hover:not(:disabled) {
  background-color: var(--bg-hover, #ebebf5);
}

:root[data-theme="light"] ._secondary_1dm3w_52:active:not(:disabled) {
  background-color: var(--bg-active, #d8d8f0);
}

:root[data-theme="light"] ._ghost_1dm3w_79 {
  color: var(--text-primary, #1e1e2e);
}

:root[data-theme="light"] ._ghost_1dm3w_79:hover:not(:disabled) {
  background-color: var(--bg-hover, #ebebf5);
}

:root[data-theme="light"] ._ghost_1dm3w_79:active:not(:disabled) {
  background-color: var(--bg-active, #d8d8f0);
}

:root[data-theme="light"] ._link_1dm3w_92 {
  color: var(--primary, #ff7b00);
}

:root[data-theme="light"] ._icon_1dm3w_104 {
  color: var(--text-secondary, rgba(30, 30, 46, 0.7));
}

:root[data-theme="light"] ._icon_1dm3w_104:hover:not(:disabled) {
  background-color: var(--bg-hover, #ebebf5);
  color: var(--text-primary, #1e1e2e);
}

:root[data-theme="light"] ._icon_1dm3w_104:active:not(:disabled) {
  background-color: var(--bg-active, #d8d8f0);
}

:root[data-theme="light"] ._filter_1dm3w_135 {
  background-color: var(--bg-medium, #e8e8f0);
  color: var(--text-secondary, rgba(30, 30, 46, 0.7));
  border-color: var(--border-color, rgba(30, 30, 46, 0.15));
}

:root[data-theme="light"] ._filter_1dm3w_135:hover:not(:disabled) {
  background-color: var(--bg-hover, #ebebf5);
  color: var(--text-primary, #1e1e2e);
}

:root[data-theme="light"] ._toggle_1dm3w_153 {
  background-color: var(--bg-medium, #e8e8f0);
  color: var(--text-secondary, rgba(30, 30, 46, 0.7));
  border-color: var(--border-color, rgba(30, 30, 46, 0.15));
}

:root[data-theme="light"] ._toggle_1dm3w_153:hover:not(:disabled) {
  background-color: var(--bg-hover, #ebebf5);
  color: var(--text-primary, #1e1e2e);
}

/* Animations */
@keyframes _spin_1dm3w_212 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes _dash_1dm3w_1 {
  0% {
    stroke-dashoffset: 60;
  }
  50% {
    stroke-dashoffset: 30;
  }
  100% {
    stroke-dashoffset: 60;
  }
}
/**
 * FileSaveDialog.css
 * VS Code-like file save dialog styling
 */

/* Overwrite Confirmation Dialog */
.overwrite-confirm-dialog {
  max-width: 500px;
  width: 90vw;
}

.overwrite-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg-warning, #fff3cd);
  border: 1px solid var(--border-warning, #ffeaa7);
  border-radius: 8px;
  margin-bottom: 16px;
}

.warning-icon {
  color: var(--text-warning, #856404);
  flex-shrink: 0;
  margin-top: 2px;
}

.warning-text p {
  margin: 0 0 8px 0;
  color: var(--text-warning, #856404);
}

.warning-text p:last-child {
  margin-bottom: 0;
}

.existing-file-info {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-light, rgba(0, 0, 0, 0.05));
  border-radius: 4px;
}

.existing-file-info small {
  color: var(--text-secondary, #666);
  font-size: 12px;
}

.backup-notice {
  padding: 8px 12px;
  background: var(--bg-info, #d1ecf1);
  border: 1px solid var(--border-info, #bee5eb);
  border-radius: 6px;
  margin-bottom: 16px;
}

.backup-notice small {
  color: var(--text-info, #0c5460);
  font-size: 12px;
}

.danger-button {
  background: var(--bg-danger, #dc3545) !important;
  color: white !important;
  border: 1px solid var(--bg-danger, #dc3545) !important;
}

.danger-button:hover {
  background: var(--bg-danger-hover, #c82333) !important;
  border-color: var(--bg-danger-hover, #c82333) !important;
}

/* Dark theme overrides for overwrite dialog */
:root[data-theme="dark"] .overwrite-warning {
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
}

:root[data-theme="dark"] .warning-icon,
:root[data-theme="dark"] .warning-text p {
  color: #ffc107;
}

:root[data-theme="dark"] .existing-file-info {
  background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .backup-notice {
  background: rgba(13, 202, 240, 0.1);
  border-color: rgba(13, 202, 240, 0.3);
}

:root[data-theme="dark"] .backup-notice small {
  color: #0dcaf0;
}

.file-save-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.file-save-dialog {
  background: var(--bg-darker, #252526);
  border: 1px solid var(--border-color, #444444);
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: var(--text-primary, #ffffff);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header */
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #444444);
  background: var(--bg-darker, #252526);
}

.dialog-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
}

.close-button {
  background: none;
  border: none;
  color: var(--dialog-text, #cccccc);
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.close-button:hover {
  background: var(--button-hover-bg, #464647);
}

/* Content */
.dialog-content {
  flex: 1;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* File name section */
.file-name-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-name-section label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #cccccc);
}

.file-name-section input {
  background: var(--bg-darkest, #1e1e1e);
  border: 1px solid var(--border-color, #464647);
  color: var(--text-primary, #ffffff);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.file-name-section input:focus {
  border-color: var(--primary, #007acc);
  box-shadow: 0 0 0 2px var(--primary-light, rgba(0, 122, 204, 0.2));
}

.file-name-section input::placeholder {
  color: var(--placeholder-text, #6c6c6c);
}

/* Location section */
.location-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.location-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.location-header label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #cccccc);
}

.create-folder-button {
  background: none;
  border: none;
  color: var(--dialog-text, #cccccc);
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.create-folder-button:hover {
  background: var(--button-hover-bg, #464647);
}

/* Current path */
.current-path {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--path-bg, #383838);
  border: 1px solid var(--path-border, #464647);
  border-radius: 3px;
  font-size: 12px;
  color: var(--path-text, #cccccc);
}

/* Folder tree */
.folder-tree {
  flex: 1;
  border: 1px solid var(--tree-border, #464647);
  border-radius: 3px;
  background: var(--tree-bg, #1e1e1e);
  overflow-y: auto;
  max-height: 200px;
  min-height: 120px;
}

.folder-tree-node {
  user-select: none;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.1s;
}

.folder-item:hover {
  background: var(--tree-hover-bg, #2a2d2e);
}

.folder-item.selected {
  background: var(--tree-selected-bg, #37373d);
  color: var(--tree-selected-text, #ffffff);
}

.folder-toggle {
  background: none;
  border: none;
  color: var(--toggle-color, #cccccc);
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border-radius: 2px;
}

.folder-toggle:hover {
  background: var(--toggle-hover-bg, #464647);
}

.folder-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-children {
  border-left: 1px solid var(--tree-line, #464647);
  margin-left: 8px;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--muted-text, #6c6c6c);
  font-style: italic;
  font-size: 12px;
}

/* Create folder input */
.create-folder-input {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--input-section-bg, #383838);
  border: 1px solid var(--input-section-border, #464647);
  border-radius: 3px;
  align-items: center;
}

.create-folder-input input {
  flex: 1;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid var(--input-border, #464647);
  color: var(--input-text, #cccccc);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  outline: none;
}

.create-folder-input input:focus {
  border-color: var(--focus-border, #007acc);
}

.create-folder-input button {
  background: var(--button-bg, #0e639c);
  border: none;
  color: var(--button-text, #ffffff);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.create-folder-input button:hover {
  background: var(--button-hover-bg, #1177bb);
}

.create-folder-input button:last-child {
  background: var(--cancel-button-bg, #5a5a5a);
}

.create-folder-input button:last-child:hover {
  background: var(--cancel-button-hover-bg, #6a6a6a);
}

/* Error message */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--error-bg, #5a1d1d);
  border: 1px solid var(--error-border, #be1100);
  border-radius: 3px;
  color: var(--error-text, #f48771);
  font-size: 12px;
}

/* Footer */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #444444);
  background: var(--bg-darker, #252526);
}

.cancel-button,
.save-button,
.dialog-button {
  padding: 6px 16px;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
}

.cancel-button {
  background: var(--cancel-bg, #5a5a5a);
  color: var(--cancel-text, #ffffff);
}

.cancel-button:hover {
  background: var(--cancel-hover-bg, #6a6a6a);
}

.save-button {
  background: linear-gradient(135deg, var(--accent, #4f8cff) 0%, var(--accent-secondary, #a78bfa) 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(79, 140, 255, 0.3);
  transition: all 0.2s ease;
}

.save-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-hover, #3576d1) 0%, var(--accent-secondary-hover, #9333ea) 100%);
  box-shadow: 0 4px 12px rgba(79, 140, 255, 0.4);
  transform: translateY(-1px);
}

.save-button:disabled {
  background: var(--disabled-bg, #5a5a5a);
  color: var(--disabled-text, #999999);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.dialog-button.secondary {
  background: var(--cancel-bg, #5a5a5a);
  color: var(--cancel-text, #ffffff);
}

.dialog-button.secondary:hover {
  background: var(--cancel-hover-bg, #6a6a6a);
}

.dialog-button.primary {
  background: var(--save-bg, #0e639c);
  color: var(--save-text, #ffffff);
}

.dialog-button.primary:hover:not(:disabled) {
  background: var(--save-hover-bg, #1177bb);
}

.dialog-button.primary:disabled {
  background: var(--disabled-bg, #5a5a5a);
  color: var(--disabled-text, #999999);
  cursor: not-allowed;
}

/* Scrollbar styling */
.folder-tree::-webkit-scrollbar {
  width: 8px;
}

.folder-tree::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #1e1e1e);
}

.folder-tree::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #424242);
  border-radius: 4px;
}

.folder-tree::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #4f4f4f);
}

/* Light theme overrides */
:root[data-theme="light"] .file-save-dialog {
  background: var(--bg-darkest, #ffffff);
  border-color: var(--border-color, #e0e0e0);
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .dialog-header {
  background: var(--bg-darkest, #ffffff);
  border-bottom-color: var(--border-color, #e0e0e0);
}

:root[data-theme="light"] .dialog-header h3 {
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .close-button {
  color: var(--text-secondary, #666666);
}

:root[data-theme="light"] .close-button:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .file-name-section label {
  color: var(--text-secondary, #666666);
}

:root[data-theme="light"] .file-name-section input {
  background: var(--bg-darker, #f8f8f8);
  border-color: var(--border-color, #e0e0e0);
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .file-name-section input:focus {
  border-color: var(--primary, #007acc);
  box-shadow: 0 0 0 2px var(--primary-light, rgba(0, 122, 204, 0.2));
}

:root[data-theme="light"] .file-name-section input::placeholder {
  color: var(--text-tertiary, #999999);
}

:root[data-theme="light"] .current-path {
  background: var(--bg-darker, #f8f8f8);
  border-color: var(--border-color, #e0e0e0);
  color: var(--text-secondary, #666666);
}

:root[data-theme="light"] .folder-tree {
  background: var(--bg-darkest, #ffffff);
  border-color: var(--border-color, #e0e0e0);
}

:root[data-theme="light"] .folder-item {
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .folder-item:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

:root[data-theme="light"] .folder-item.selected {
  background: var(--bg-selected, rgba(0, 122, 204, 0.1));
  color: var(--primary, #007acc);
}

:root[data-theme="light"] .folder-toggle {
  color: var(--text-secondary, #666666);
}

:root[data-theme="light"] .folder-toggle:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

:root[data-theme="light"] .create-folder-input {
  background: var(--bg-darker, #f8f8f8);
  border-color: var(--border-color, #e0e0e0);
}

:root[data-theme="light"] .create-folder-input input {
  background: var(--bg-darkest, #ffffff);
  border-color: var(--border-color, #e0e0e0);
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .create-folder-input button {
  background: var(--primary, #007acc);
  color: var(--text-primary, #ffffff);
}

:root[data-theme="light"] .create-folder-input button:hover {
  background: var(--primary-dark, #005a9e);
}

:root[data-theme="light"] .create-folder-input button:last-child {
  background: var(--bg-light, #e0e0e0);
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .create-folder-input button:last-child:hover {
  background: var(--bg-lighter, #d0d0d0);
}

:root[data-theme="light"] .dialog-footer {
  background: var(--bg-darkest, #ffffff);
  border-top-color: var(--border-color, #e0e0e0);
}

:root[data-theme="light"] .cancel-button {
  background: var(--bg-light, #e0e0e0);
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .cancel-button:hover {
  background: var(--bg-lighter, #d0d0d0);
}

:root[data-theme="light"] .save-button {
  background: #0066cc;
  color: #ffffff;
  border: 1px solid #0066cc;
}

:root[data-theme="light"] .save-button:hover:not(:disabled) {
  background: #0052a3;
  border-color: #0052a3;
}

:root[data-theme="light"] .save-button:disabled {
  background: var(--bg-light, #e0e0e0);
  color: var(--text-tertiary, #999999);
}

:root[data-theme="light"] .error-message {
  background: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
  color: #dc3545;
}

:root[data-theme="light"] .loading {
  color: var(--text-tertiary, #999999);
}

/* Scrollbar styling for light theme */
:root[data-theme="light"] .folder-tree::-webkit-scrollbar-track {
  background: var(--bg-darkest, #ffffff);
}

:root[data-theme="light"] .folder-tree::-webkit-scrollbar-thumb {
  background: var(--bg-light, #e0e0e0);
}

:root[data-theme="light"] .folder-tree::-webkit-scrollbar-thumb:hover {
  background: var(--bg-lighter, #d0d0d0);
}
/**
 * FileTypeSelectionModal.css
 * 
 * Theme-consistent styles for the file type selection modal
 * Uses the application's modal theme system
 */

/* Import the modal theme */

/**
 * Modal Theme Variables
 * 
 * Centralized CSS variables for consistent modal styling across the application.
 * This fixes transparency issues and provides a unified design system.
 */

:root {
  /* Z-Index Management */
  --z-index-modal: 1000;
  --z-index-modal-high: 1050;
  --z-index-modal-critical: 1100;
  --z-index-tooltip: 1200;
  --z-index-notification: 1300;

  /* Modal Animations */
  --modal-animation-duration: 0.3s;
  --modal-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --modal-scale-from: 0.95;
  --modal-scale-to: 1;

  /* Modal Sizes */
  --modal-max-width-small: 400px;
  --modal-max-width-medium: 600px;
  --modal-max-width-large: 800px;
  --modal-max-width-xlarge: 1200px;
  --modal-border-radius: 8px;

  /* Form Elements */
  --modal-input-padding: 8px 12px;
  --modal-input-border-radius: 6px;

  /* Dark Theme - Default for Everything Studio */
  /* Modal Backdrop */
  --modal-backdrop-color: rgba(0, 0, 0, 0.8);
  --modal-backdrop-blur: 6px;
  --modal-backdrop-transition: all 0.3s ease;

  /* Modal Container */
  --modal-background: #1e293b;
  --modal-text-color: #f1f5f9;
  --modal-border-color: #334155;
  --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

  /* Modal Header */
  --modal-header-background: #1e293b;
  --modal-header-border: 1px solid #334155;
  --modal-header-padding: 20px 24px;
  --modal-title-color: #f1f5f9;
  --modal-title-size: 1.25rem;
  --modal-title-weight: 600;

  /* Modal Body */
  --modal-body-background: #1e293b;
  --modal-body-padding: 24px;
  --modal-body-max-height: calc(100vh - 200px);

  /* Modal Footer */
  --modal-footer-background: var(--bg-darker);
  --modal-footer-border: 1px solid var(--border-color);
  --modal-footer-padding: 16px 24px;

  /* Modal Buttons */
  --modal-button-primary-bg: var(--primary);
  --modal-button-primary-color: #ffffff;
  --modal-button-primary-hover: var(--primary-light);
  --modal-button-primary-bg-hover: rgba(var(--primary-rgb), 0.1);
  --modal-button-secondary-bg: transparent;
  --modal-button-secondary-color: #94a3b8;
  --modal-button-secondary-border: 1px solid #475569;
  --modal-button-secondary-hover: #334155;
  --modal-button-danger-bg: #f87171;
  --modal-button-danger-color: #ffffff;
  --modal-button-danger-hover: #ef4444;

  /* Modal Surface */
  --modal-surface-color: #334155;

  /* Form Elements */
  --modal-input-background: #334155;
  --modal-input-border: 1px solid #475569;
  --modal-input-border-focus: 1px solid #818cf8;
  --modal-input-text: #f1f5f9;
  --modal-input-placeholder: #94a3b8;
}

/* Light Theme Override */

[data-theme="light"],
.light-theme {
  /* Modal Backdrop */
  --modal-backdrop-color: rgba(0, 0, 0, 0.6);
  --modal-backdrop-blur: 4px;

  /* Modal Container */
  --modal-background: #ffffff;
  --modal-text-color: #1e293b;
  --modal-border-color: #e2e8f0;
  --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Modal Header */
  --modal-header-background: #ffffff;
  --modal-header-border: 1px solid #e2e8f0;
  --modal-title-color: #1e293b;

  /* Modal Body */
  --modal-body-background: #ffffff;

  /* Modal Footer */
  --modal-footer-background: var(--bg-darker);
  --modal-footer-border: 1px solid var(--border-color);

  /* Modal Buttons */
  --modal-button-primary-bg: var(--primary);
  --modal-button-primary-hover: var(--primary-dark);
  --modal-button-primary-bg-hover: rgba(var(--primary-rgb), 0.1);
  --modal-button-secondary-bg: transparent;
  --modal-button-secondary-color: #6b7280;
  --modal-button-secondary-border: 1px solid #d1d5db;
  --modal-button-secondary-hover: #f3f4f6;
  --modal-button-danger-bg: #ef4444;
  --modal-button-danger-hover: #dc2626;

  /* Modal Surface */
  --modal-surface-color: #f8fafc;

  /* Form Elements */
  --modal-input-background: #ffffff;
  --modal-input-border: 1px solid #d1d5db;
  --modal-input-border-focus: 1px solid #6366f1;
  --modal-input-text: #374151;
  --modal-input-placeholder: #9ca3af;
}

/* Modal Base Classes */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  background-color: var(--modal-backdrop-color);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  transition: var(--modal-backdrop-transition);
  padding: 16px;
}

.modal-container {
  background-color: var(--modal-background);
  color: var(--modal-text-color);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  border: 1px solid var(--modal-border-color);
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalEnter var(--modal-animation-duration) var(--modal-animation-easing);
}

.modal-container.small {
  max-width: var(--modal-max-width-small);
}

.modal-container.medium {
  max-width: var(--modal-max-width-medium);
}

.modal-container.large {
  max-width: var(--modal-max-width-large);
}

.modal-container.xlarge {
  max-width: var(--modal-max-width-xlarge);
}

.modal-header {
  background-color: var(--modal-header-background);
  border-bottom: var(--modal-header-border);
  padding: var(--modal-header-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  color: var(--modal-title-color);
  font-size: var(--modal-title-size);
  font-weight: var(--modal-title-weight);
  margin: 0;
}

.modal-body {
  background-color: var(--modal-body-background);
  padding: var(--modal-body-padding);
  flex: 1;
  overflow-y: auto;
  max-height: var(--modal-body-max-height);
}

.modal-footer {
  background-color: var(--modal-footer-background);
  border-top: var(--modal-footer-border);
  padding: var(--modal-footer-padding);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* Modal Buttons */

.modal-button {
  padding: var(--modal-input-padding);
  border-radius: var(--modal-input-border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-size: 14px;
}

.modal-button.primary {
  background-color: var(--modal-button-primary-bg);
  color: var(--modal-button-primary-color);
}

.modal-button.primary:hover {
  background-color: var(--modal-button-primary-hover);
}

.modal-button.secondary {
  background-color: var(--modal-button-secondary-bg);
  color: var(--modal-button-secondary-color);
  border: var(--modal-button-secondary-border);
}

.modal-button.secondary:hover {
  background-color: var(--modal-button-secondary-hover);
}

.modal-button.danger {
  background-color: var(--modal-button-danger-bg);
  color: var(--modal-button-danger-color);
}

.modal-button.danger:hover {
  background-color: var(--modal-button-danger-hover);
}

/* Modal Form Elements */

.modal-field {
  margin-bottom: 20px;
}

.modal-label {
  display: block;
  color: var(--modal-text-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.modal-input {
  background-color: var(--modal-input-background);
  border: var(--modal-input-border);
  color: var(--modal-input-text);
  padding: var(--modal-input-padding);
  border-radius: var(--modal-input-border-radius);
  width: 100%;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.modal-input:focus {
  outline: none;
  border: var(--modal-input-border-focus);
}

.modal-input::placeholder {
  color: var(--modal-input-placeholder);
}

/* Animations */

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(var(--modal-scale-from));
  }
  to {
    opacity: 1;
    transform: scale(var(--modal-scale-to));
  }
}

@keyframes modalExit {
  from {
    opacity: 1;
    transform: scale(var(--modal-scale-to));
  }
  to {
    opacity: 0;
    transform: scale(var(--modal-scale-from));
  }
}

/* Responsive Design */

@media (max-width: 640px) {
  .modal-overlay {
    padding: 8px;
  }
  
  .modal-header {
    padding: 16px;
  }
  
  .modal-body {
    padding: 16px;
  }
  
  .modal-footer {
    padding: 12px 16px;
  }
}

/* File type grid layout */

.file-type-grid {
  display: grid;
  gap: var(--space-sm, 8px);
  grid-template-columns: 1fr;
}

/* File type option button */

.file-type-option {
  display: flex;
  align-items: center;
  padding: var(--space-md, 16px);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 8px);
  cursor: pointer;
  text-align: left;
  transition: var(--transition-fast);
  width: 100%;
  color: var(--text-primary);
}

.file-type-option:hover {
  background-color: var(--bg-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.file-type-option:active {
  transform: translateY(0);
  background-color: var(--bg-selected);
}

/* File type icon container */

.file-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: var(--space-md, 16px);
  background: var(--bg-light);
  border-radius: var(--radius-lg, 8px);
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.file-type-option:hover .file-type-icon {
  background: var(--primary);
  color: var(--bg-darkest);
}

/* File type content */

.file-type-content {
  flex: 1;
  min-width: 0;
}

.file-type-label {
  font-weight: var(--font-weight-medium, 500);
  font-size: var(--font-size-sm, 14px);
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}

.file-type-description {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-secondary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.file-type-extensions {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-family-monospace, monospace);
  line-height: 1.2;
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .file-type-option {
    padding: var(--space-sm, 12px);
  }
  
  .file-type-icon {
    width: 32px;
    height: 32px;
    margin-right: var(--space-sm, 12px);
  }
  
  .file-type-label {
    font-size: var(--font-size-xs, 12px);
  }
  
  .file-type-description {
    font-size: 11px;
  }
  
  .file-type-extensions {
    font-size: 10px;
  }
}

/* Focus styles for accessibility */

.file-type-option:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Animation for modal entrance */

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Dark theme specific adjustments */

[data-theme="dark"] .file-type-option {
  border-color: var(--border-color);
}

[data-theme="dark"] .file-type-option:hover {
  background-color: var(--bg-hover);
  border-color: var(--primary);
}

[data-theme="dark"] .file-type-icon {
  background: var(--bg-medium);
  color: var(--text-secondary);
}

[data-theme="dark"] .file-type-option:hover .file-type-icon {
  background: var(--primary);
  color: var(--bg-darkest);
}

/* Light theme specific adjustments */

[data-theme="light"] .file-type-option {
  border-color: var(--border-color);
}

[data-theme="light"] .file-type-option:hover {
  background-color: var(--bg-hover);
  border-color: var(--primary);
}

[data-theme="light"] .file-type-icon {
  background: var(--bg-light);
  color: var(--text-secondary);
}

[data-theme="light"] .file-type-option:hover .file-type-icon {
  background: var(--primary);
  color: white;
}

/* Ensure proper spacing in modal body */

.modal-body .file-type-grid {
  margin: 0;
}

/* Custom close button styling */

.modal-header .modal-button.secondary {
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.modal-header .modal-button.secondary:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}
/**
 * UnifiedFileExplorer.css
 * VS Code-like file explorer styling
 */

.unified-file-explorer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sidebar-bg, #1e1e1e);
  color: var(--sidebar-text, #cccccc);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  border-right: 1px solid var(--border-color, #333);
}

/* Header - Compact */
.file-explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--header-bg, #252526);
  min-height: 32px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #f8f8f2);
}

.connection-status {
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.header-actions {
  display: flex;
  gap: 2px;
}

.header-actions button {
  background: none;
  border: none;
  color: var(--header-text, #cccccc);
  padding: 3px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  width: 24px;
  height: 24px;
}

.header-actions button svg {
  width: 14px;
  height: 14px;
}

.header-actions button:hover {
  background: var(--button-hover-bg, #2a2d2e);
}

.header-actions button.active {
  background: var(--accent-color, #007acc);
  color: white;
}

.header-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Search */
.file-explorer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
}

.file-explorer-search input {
  flex: 1;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid var(--input-border, #464647);
  color: var(--input-text, #cccccc);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
}

.file-explorer-search input:focus {
  border-color: var(--primary, #007acc);
}

.file-explorer-search input::placeholder {
  color: var(--placeholder-text, #6c6c6c);
}

/* File Tree - Compact layout */
.file-explorer-tree {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.custom-tree {
  width: 100%;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--muted-text, #6c6c6c);
  font-style: italic;
}

/* File Tree Nodes - Clean compact style like assets */
.file-tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.1s;
  border-radius: 0;
  min-height: 22px;
}

.file-tree-node:hover {
  background: var(--hover-bg, #2a2d2e);
}

.file-tree-node.selected {
  background: var(--selected-bg, #37373d);
  color: var(--selected-text, #ffffff);
}

.file-tree-node.primary-selected {
  background: var(--selected-bg, #37373d);
  color: var(--selected-text, #ffffff);
}

.node-content {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
}

.folder-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.1s;
  flex-shrink: 0;
}

.folder-toggle:hover {
  background: var(--toggle-hover-bg, #2a2d2e);
}

.folder-toggle svg {
  width: 10px;
  height: 10px;
  opacity: 0.7;
  transition: opacity 0.1s;
}

.folder-toggle:hover svg {
  opacity: 1;
}

.node-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

/* File type icons styling - smaller and cleaner */
.file-tree-node svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.8;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* File icons */
.file-tree-node svg[data-lucide="file"] {
  color: var(--file-color, #cccccc);
}

/* Ensure all file icons have proper color */
.file-tree-node svg {
  color: var(--text-color, #cccccc);
}

/* Emoji file type icons - smaller */
.file-tree-node span[title] {
  flex-shrink: 0;
  user-select: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 12px;
  filter: brightness(0.9);
  transition: filter 0.1s ease;
}

.file-tree-node:hover span[title] {
  filter: brightness(1.1);
}

/* File type specific styling */
.file-tree-node span[title*="Rich Text"] {
  color: #4a90e2;
}

.file-tree-node span[title*="Code"] {
  color: #7ed321;
}

.file-tree-node span[title*="Drawing"] {
  color: #f5a623;
}

.file-tree-node span[title*="3D Model"] {
  color: #bd10e0;
}

.file-tree-node span[title*="Audio"] {
  color: #50e3c2;
}

.file-tree-node span[title*="Video"] {
  color: #d0021b;
}

.file-tree-node span[title*="Spreadsheet"] {
  color: #417505;
}

/* Drag and drop styles */
.file-tree-node {
  transition: background-color 0.1s, border 0.1s;
}

.file-tree-node[draggable="true"] {
  cursor: grab;
}

.file-tree-node[draggable="true"]:active {
  cursor: grabbing;
}

.file-tree-node.drag-over {
  background: var(--drag-over-bg, #2a4d6a) !important;
  border: 1px dashed var(--drag-over-border, #4a9eff);
  border-radius: 3px;
}

.file-tree-node.external-drag-target {
  background: var(--external-drag-bg, #1a3d1a) !important;
  border: 1px dashed var(--external-drag-border, #4ade80);
  border-radius: 3px;
}

.file-explorer-tree.dragging-external {
  background: var(--external-drag-zone-bg, rgba(74, 222, 128, 0.1));
  border: 2px dashed var(--external-drag-border, #4ade80);
  border-radius: 6px;
}

/* Scrollbar styling */
.file-explorer-tree::-webkit-scrollbar {
  width: 8px;
}

.file-explorer-tree::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #1e1e1e);
}

.file-explorer-tree::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #424242);
  border-radius: 4px;
}

.file-explorer-tree::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #4f4f4f);
}

/* Dark theme variables (default) */
:root {
  --sidebar-bg: #1e1e1e;
  --sidebar-text: #cccccc;
  --header-bg: #252526;
  --header-text: #cccccc;
  --border-color: #333;
  --button-hover-bg: #2a2d2e;
  --search-bg: #1e1e1e;
  --input-bg: #3c3c3c;
  --input-border: #464647;
  --input-text: #cccccc;
  --focus-border: var(--primary, #007acc);
  --placeholder-text: #6c6c6c;
  --muted-text: #6c6c6c;
  --hover-bg: #2a2d2e;
  --selected-bg: #37373d;
  --selected-text: #ffffff;
  --multi-selected-bg: #2a4d6a;
  --multi-selected-text: #ffffff;
  --accent-color: var(--primary, #007bff);
  --file-color: #cccccc;
  --scrollbar-track: #1e1e1e;
  --scrollbar-thumb: #424242;
  --scrollbar-thumb-hover: #4f4f4f;
  --toggle-hover-bg: #2a2d2e;
  --drag-over-bg: #2a4d6a;
  --drag-over-border: var(--primary-light, #4a9eff);
  --external-drag-bg: #1a3d1a;
  --external-drag-border: #4ade80;
  --external-drag-zone-bg: rgba(74, 222, 128, 0.1);

  /* Modal variables - dark theme */
  --modal-bg: #2d2d30;
  --modal-text: #cccccc;
  --modal-heading: #ffffff;
  --modal-label: #cccccc;
  --modal-input-bg: #3c3c3c;
  --modal-input-border: #464647;
  --modal-input-text: #cccccc;
  --modal-location-bg: #252526;
  --modal-location-border: #464647;
  --modal-location-text: #cccccc;
  --modal-button-border: #464647;
  --modal-button-secondary-bg: #3c3c3c;
  --modal-button-secondary-text: #cccccc;
  --modal-button-secondary-hover: #464647;
  --modal-button-disabled: #555555;
}

/* Light theme */
[data-theme="light"] {
  --sidebar-bg: #f3f3f3;
  --sidebar-text: #383838;
  --header-bg: #e8e8e8;
  --header-text: #383838;
  --border-color: #e5e5e5;
  --button-hover-bg: #e0e0e0;
  --search-bg: #f3f3f3;
  --input-bg: #ffffff;
  --input-border: #d0d0d0;
  --input-text: #383838;
  --focus-border: var(--primary, #0078d4);
  --placeholder-text: #767676;
  --muted-text: #767676;
  --hover-bg: #e8e8e8;
  --selected-bg: #e4e6f1;
  --selected-text: #000000;
  --multi-selected-bg: #e3f2fd;
  --multi-selected-text: var(--primary, #1976d2);
  --accent-color: var(--primary, #1976d2);
  --file-color: #383838;
  --scrollbar-track: #f3f3f3;
  --scrollbar-thumb: #c1c1c1;
  --scrollbar-thumb-hover: #a6a6a6;
  --drag-over-bg: #e3f2fd;
  --drag-over-border: var(--primary, #2196f3);
  --external-drag-bg: #e8f5e8;
  --external-drag-border: #4caf50;
  --external-drag-zone-bg: rgba(76, 175, 80, 0.1);

  /* Modal variables - light theme */
  --modal-bg: #ffffff;
  --modal-text: #333333;
  --modal-heading: #333333;
  --modal-label: #555555;
  --modal-input-bg: #ffffff;
  --modal-input-border: #ddd;
  --modal-input-text: #333333;
  --modal-location-bg: #f8f9fa;
  --modal-location-border: #e9ecef;
  --modal-location-text: #6c757d;
  --modal-button-border: #ddd;
  --modal-button-secondary-bg: #ffffff;
  --modal-button-secondary-text: #333333;
  --modal-button-secondary-hover: #f8f9fa;
  --modal-button-disabled: #ccc;
}

/* Responsive design */
@media (max-width: 768px) {
  .unified-file-explorer {
    font-size: 14px;
  }

  .file-tree-node {
    padding: 0 8px;
  }

  .header-actions {
    gap: 2px;
  }

  .header-actions button {
    padding: 6px;
  }
}

/* Animation for loading state */
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Focus styles for accessibility */
.file-tree-node:focus {
  outline: 2px solid var(--focus-border, #007acc);
  outline-offset: -2px;
}

.header-actions button:focus {
  outline: 2px solid var(--focus-border, #007acc);
  outline-offset: 2px;
}

.file-explorer-search input:focus {
  box-shadow: 0 0 0 2px var(--focus-border, #007acc);
}

/* Light mode support */
@media (prefers-color-scheme: light) {
  .unified-file-explorer {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border-color: #e0e0e0;
    --header-bg: #f8f9fa;
    --header-text: #1a1a1a;
  }

  .header-title {
    color: #1a1a1a;
    font-weight: 600;
  }

  .file-tree-node {
    color: #1a1a1a;
  }

  .file-tree-node:hover {
    background: #f0f0f0;
  }
}

/* ============================================================================
   ENHANCED MODAL STYLES - Modern 2025 UX
   ============================================================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(20px);
  animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Performance optimization */
  will-change: opacity, backdrop-filter;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.modal-content {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  color: var(--modal-text, #333333);
  border-radius: 24px;
  padding: 32px;
  min-width: 440px;
  max-width: 540px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  position: relative;
  animation: modalSpringIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Performance optimization */
  will-change: transform, opacity;
}

/* Spring physics animation */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Animated background pattern */
.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 8s ease-in-out infinite;
  border-radius: 24px;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.modal-content > * {
  position: relative;
  z-index: 1;
}

.modal-content h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--modal-heading, #333333);
}

.modal-content label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--modal-label, #555555);
}

.modal-content input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--modal-input-border, #ddd);
  border-radius: 4px;
  font-size: 14px;
  background: var(--modal-input-bg, #ffffff);
  color: var(--modal-input-text, #333333);
  outline: none;
  transition: border-color 0.2s;
}

.modal-content input:focus {
  border-color: var(--primary, #007bff);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.modal-location-display {
  padding: 8px 12px;
  background: var(--modal-location-bg, #f8f9fa);
  border: 1px solid var(--modal-location-border, #e9ecef);
  border-radius: 4px;
  font-size: 14px;
  color: var(--modal-location-text, #6c757d);
}

.modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  outline: none;
}

.modal-button:focus {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.modal-button.secondary {
  border: 1px solid var(--modal-button-border, #ddd);
  background: var(--modal-button-secondary-bg, #ffffff);
  color: var(--modal-button-secondary-text, #333333);
}

.modal-button.secondary:hover {
  background: var(--modal-button-secondary-hover, #f8f9fa);
}

.modal-button.primary {
  border: none;
  background: var(--primary, #007bff);
  color: white;
}

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

.modal-button.primary:disabled {
  background: var(--modal-button-disabled, #ccc);
  cursor: not-allowed;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Unified Name Input Styles */

.unified-name-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.unified-name-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.required-asterisk {
  color: var(--error-color);
  font-weight: 600;
}

.unified-name-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.unified-name-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
  border: 1.5px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: all 0.2s ease;
  outline: none;
}

.unified-name-input::placeholder {
  color: var(--text-tertiary);
}

.unified-name-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-color-alpha);
}

.unified-name-input.valid {
  border-color: var(--success-color);
}

.unified-name-input.valid:focus {
  border-color: var(--success-color);
  box-shadow: 0 0 0 3px var(--success-color-alpha);
}

.unified-name-input.invalid {
  border-color: var(--error-color);
}

.unified-name-input.invalid:focus {
  border-color: var(--error-color);
  box-shadow: 0 0 0 3px var(--error-color-alpha);
}

.unified-name-input.disabled {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.unified-name-status {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Error Message */
.unified-name-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--error-color-alpha);
  border: 1px solid var(--error-color);
  border-radius: 0.375rem;
  color: var(--error-color);
  font-size: 0.75rem;
}

/* Success Message */
.unified-name-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--success-color-alpha);
  border: 1px solid var(--success-color);
  border-radius: 0.375rem;
  color: var(--success-color);
  font-size: 0.75rem;
}

/* Suggestion Box */
.unified-name-suggestion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--warning-color-alpha);
  border: 1px solid var(--warning-color);
  border-radius: 0.5rem;
  color: var(--warning-color);
}

.suggestion-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.suggestion-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.suggestion-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--warning-color);
  border-radius: 0.375rem;
  background: var(--bg-primary);
  color: var(--warning-color);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.suggestion-button:hover {
  background: var(--warning-color);
  color: white;
}

.suggestion-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.suggestion-button:disabled:hover {
  background: var(--bg-primary);
  color: var(--warning-color);
}

/* Animation for status changes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.unified-name-error,
.unified-name-success,
.unified-name-suggestion {
  animation: fadeIn 0.2s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .unified-name-input {
    padding: 0.625rem 2.25rem 0.625rem 0.625rem;
    font-size: 0.8125rem;
  }
  
  .unified-name-status {
    right: 0.625rem;
  }
  
  .unified-name-error,
  .unified-name-success,
  .unified-name-suggestion {
    padding: 0.5rem;
    font-size: 0.6875rem;
  }
  
  .suggestion-button {
    padding: 0.375rem 0.5rem;
    font-size: 0.6875rem;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .unified-name-input {
    background: var(--bg-secondary);
  }
  
  .unified-name-input.disabled {
    background: var(--bg-quaternary);
  }
  
  .suggestion-button {
    background: var(--bg-secondary);
  }
  
  .suggestion-button:hover {
    background: var(--warning-color);
  }
}
/**
 * Modal Theme Variables
 * 
 * Centralized CSS variables for consistent modal styling across the application.
 * This fixes transparency issues and provides a unified design system.
 */

:root {
  /* Z-Index Management */
  --z-index-modal: 1000;
  --z-index-modal-high: 1050;
  --z-index-modal-critical: 1100;
  --z-index-tooltip: 1200;
  --z-index-notification: 1300;

  /* Modal Animations */
  --modal-animation-duration: 0.3s;
  --modal-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --modal-scale-from: 0.95;
  --modal-scale-to: 1;

  /* Modal Sizes */
  --modal-max-width-small: 400px;
  --modal-max-width-medium: 600px;
  --modal-max-width-large: 800px;
  --modal-max-width-xlarge: 1200px;
  --modal-border-radius: 8px;

  /* Form Elements */
  --modal-input-padding: 8px 12px;
  --modal-input-border-radius: 6px;

  /* Dark Theme - Default for Everything Studio */
  /* Modal Backdrop */
  --modal-backdrop-color: rgba(0, 0, 0, 0.8);
  --modal-backdrop-blur: 6px;
  --modal-backdrop-transition: all 0.3s ease;

  /* Modal Container */
  --modal-background: #1e293b;
  --modal-text-color: #f1f5f9;
  --modal-border-color: #334155;
  --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

  /* Modal Header */
  --modal-header-background: #1e293b;
  --modal-header-border: 1px solid #334155;
  --modal-header-padding: 20px 24px;
  --modal-title-color: #f1f5f9;
  --modal-title-size: 1.25rem;
  --modal-title-weight: 600;

  /* Modal Body */
  --modal-body-background: #1e293b;
  --modal-body-padding: 24px;
  --modal-body-max-height: calc(100vh - 200px);

  /* Modal Footer */
  --modal-footer-background: var(--bg-darker);
  --modal-footer-border: 1px solid var(--border-color);
  --modal-footer-padding: 16px 24px;

  /* Modal Buttons */
  --modal-button-primary-bg: var(--primary);
  --modal-button-primary-color: #ffffff;
  --modal-button-primary-hover: var(--primary-light);
  --modal-button-primary-bg-hover: rgba(var(--primary-rgb), 0.1);
  --modal-button-secondary-bg: transparent;
  --modal-button-secondary-color: #94a3b8;
  --modal-button-secondary-border: 1px solid #475569;
  --modal-button-secondary-hover: #334155;
  --modal-button-danger-bg: #f87171;
  --modal-button-danger-color: #ffffff;
  --modal-button-danger-hover: #ef4444;

  /* Modal Surface */
  --modal-surface-color: #334155;

  /* Form Elements */
  --modal-input-background: #334155;
  --modal-input-border: 1px solid #475569;
  --modal-input-border-focus: 1px solid #818cf8;
  --modal-input-text: #f1f5f9;
  --modal-input-placeholder: #94a3b8;
}

/* Light Theme Override */
[data-theme="light"],
.light-theme {
  /* Modal Backdrop */
  --modal-backdrop-color: rgba(0, 0, 0, 0.6);
  --modal-backdrop-blur: 4px;

  /* Modal Container */
  --modal-background: #ffffff;
  --modal-text-color: #1e293b;
  --modal-border-color: #e2e8f0;
  --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Modal Header */
  --modal-header-background: #ffffff;
  --modal-header-border: 1px solid #e2e8f0;
  --modal-title-color: #1e293b;

  /* Modal Body */
  --modal-body-background: #ffffff;

  /* Modal Footer */
  --modal-footer-background: var(--bg-darker);
  --modal-footer-border: 1px solid var(--border-color);

  /* Modal Buttons */
  --modal-button-primary-bg: var(--primary);
  --modal-button-primary-hover: var(--primary-dark);
  --modal-button-primary-bg-hover: rgba(var(--primary-rgb), 0.1);
  --modal-button-secondary-bg: transparent;
  --modal-button-secondary-color: #6b7280;
  --modal-button-secondary-border: 1px solid #d1d5db;
  --modal-button-secondary-hover: #f3f4f6;
  --modal-button-danger-bg: #ef4444;
  --modal-button-danger-hover: #dc2626;

  /* Modal Surface */
  --modal-surface-color: #f8fafc;

  /* Form Elements */
  --modal-input-background: #ffffff;
  --modal-input-border: 1px solid #d1d5db;
  --modal-input-border-focus: 1px solid #6366f1;
  --modal-input-text: #374151;
  --modal-input-placeholder: #9ca3af;
}

/* Modal Base Classes */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  background-color: var(--modal-backdrop-color);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  transition: var(--modal-backdrop-transition);
  padding: 16px;
}

.modal-container {
  background-color: var(--modal-background);
  color: var(--modal-text-color);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  border: 1px solid var(--modal-border-color);
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalEnter var(--modal-animation-duration) var(--modal-animation-easing);
}

.modal-container.small {
  max-width: var(--modal-max-width-small);
}

.modal-container.medium {
  max-width: var(--modal-max-width-medium);
}

.modal-container.large {
  max-width: var(--modal-max-width-large);
}

.modal-container.xlarge {
  max-width: var(--modal-max-width-xlarge);
}

.modal-header {
  background-color: var(--modal-header-background);
  border-bottom: var(--modal-header-border);
  padding: var(--modal-header-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  color: var(--modal-title-color);
  font-size: var(--modal-title-size);
  font-weight: var(--modal-title-weight);
  margin: 0;
}

.modal-body {
  background-color: var(--modal-body-background);
  padding: var(--modal-body-padding);
  flex: 1;
  overflow-y: auto;
  max-height: var(--modal-body-max-height);
}

.modal-footer {
  background-color: var(--modal-footer-background);
  border-top: var(--modal-footer-border);
  padding: var(--modal-footer-padding);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* Modal Buttons */
.modal-button {
  padding: var(--modal-input-padding);
  border-radius: var(--modal-input-border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-size: 14px;
}

.modal-button.primary {
  background-color: var(--modal-button-primary-bg);
  color: var(--modal-button-primary-color);
}

.modal-button.primary:hover {
  background-color: var(--modal-button-primary-hover);
}

.modal-button.secondary {
  background-color: var(--modal-button-secondary-bg);
  color: var(--modal-button-secondary-color);
  border: var(--modal-button-secondary-border);
}

.modal-button.secondary:hover {
  background-color: var(--modal-button-secondary-hover);
}

.modal-button.danger {
  background-color: var(--modal-button-danger-bg);
  color: var(--modal-button-danger-color);
}

.modal-button.danger:hover {
  background-color: var(--modal-button-danger-hover);
}

/* Modal Form Elements */
.modal-field {
  margin-bottom: 20px;
}

.modal-label {
  display: block;
  color: var(--modal-text-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.modal-input {
  background-color: var(--modal-input-background);
  border: var(--modal-input-border);
  color: var(--modal-input-text);
  padding: var(--modal-input-padding);
  border-radius: var(--modal-input-border-radius);
  width: 100%;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.modal-input:focus {
  outline: none;
  border: var(--modal-input-border-focus);
}

.modal-input::placeholder {
  color: var(--modal-input-placeholder);
}

/* Animations */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(var(--modal-scale-from));
  }
  to {
    opacity: 1;
    transform: scale(var(--modal-scale-to));
  }
}

@keyframes modalExit {
  from {
    opacity: 1;
    transform: scale(var(--modal-scale-to));
  }
  to {
    opacity: 0;
    transform: scale(var(--modal-scale-from));
  }
}

/* Responsive Design */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 8px;
  }
  
  .modal-header {
    padding: 16px;
  }
  
  .modal-body {
    padding: 16px;
  }
  
  .modal-footer {
    padding: 12px 16px;
  }
}
/* AI Asset Keep/Delete Dialog */
.ai-asset-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.ai-asset-dialog {
  background: var(--bg-surface-1, #1a1d23);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: dialogSlideIn 0.3s ease-out;
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ai-asset-dialog-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color, #2a2e36);
  background: var(--bg-surface-2, #252830);
}

.ai-asset-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-asset-info svg {
  color: var(--accent-color, #3b82f6);
  flex-shrink: 0;
}

.ai-asset-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
}

.ai-asset-info p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: var(--text-secondary, #9ca3af);
}

.ai-asset-info .ai-prompt {
  font-style: italic;
  color: var(--text-tertiary, #6b7280);
  font-size: 13px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--bg-surface-0, #0f1419);
  border-radius: 4px;
  border-left: 3px solid var(--accent-color, #3b82f6);
}

.ai-asset-info .generation-service {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  margin-top: 4px;
  opacity: 0.8;
}

.ai-asset-preview {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-surface-0, #0f1419);
  min-height: 200px;
}

.asset-preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.asset-preview-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
}

.asset-preview-audio {
  width: 100%;
  max-width: 400px;
}

.asset-preview-text {
  width: 100%;
  max-width: 500px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-surface-2, #2a2e36);
  border: 1px solid var(--border-color, #3c3c3c);
  border-radius: 8px;
  padding: 16px;
}

.text-content {
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.asset-preview-3d {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background: var(--bg-surface-2, #2a2e36);
  border: 1px solid var(--border-color, #3c3c3c);
  border-radius: 8px;
  text-align: center;
}

.model-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary, #a6adc8);
}

.view-model-link {
  color: var(--accent-primary, #89b4fa);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--accent-primary, #89b4fa);
  border-radius: 6px;
  transition: all 0.2s;
}

.view-model-link:hover {
  background: var(--accent-primary, #89b4fa);
  color: var(--bg-surface-1, #1a1d23);
}

.ai-asset-actions {
  padding: 20px;
  background: var(--bg-surface-1, #1a1d23);
}

.save-location-selection {
  margin-bottom: 16px;
}

.save-location-selection > label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 14px;
}

.location-options {
  display: flex;
  gap: 16px;
}

.location-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: normal !important;
  margin-bottom: 0 !important;
}

.location-option input[type="radio"] {
  margin: 0;
}

.location-option span {
  color: var(--text-secondary);
  font-size: 14px;
}

.folder-selection {
  margin-bottom: 20px;
}

.folder-selection label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #e5e7eb);
}

.folder-input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.folder-path-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg-surface-2, #252830);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 6px;
  color: var(--text-primary, #e5e7eb);
  font-size: 14px;
}

.folder-path-input:focus {
  outline: none;
  border-color: var(--accent-color, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.folder-browse-btn {
  padding: 10px 12px;
  background: var(--bg-surface-2, #252830);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 6px;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
  transition: all 0.2s ease;
}

.folder-browse-btn:hover {
  background: var(--bg-surface-3, #2a2e36);
  color: var(--text-primary, #e5e7eb);
}

.folder-selector {
  background: var(--bg-surface-2, #252830);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 8px;
  max-height: 300px;
  overflow: hidden;
}

.folder-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #2a2e36);
  background: var(--bg-surface-3, #2a2e36);
}

.folder-selector-header span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #e5e7eb);
}

.create-folder-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 4px;
  color: var(--text-secondary, #9ca3af);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-folder-btn:hover {
  background: var(--bg-surface-1, #1a1d23);
  color: var(--text-primary, #e5e7eb);
}

.create-folder-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #2a2e36);
  background: var(--bg-surface-1, #1a1d23);
}

.new-folder-input {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg-surface-2, #252830);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 4px;
  color: var(--text-primary, #e5e7eb);
  font-size: 13px;
}

.new-folder-input:focus {
  outline: none;
  border-color: var(--accent-color, #3b82f6);
}

.create-folder-confirm {
  padding: 8px 12px;
  background: var(--accent-color, #3b82f6);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.create-folder-confirm:hover:not(:disabled) {
  background: var(--accent-color-hover, #2563eb);
}

.create-folder-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.folder-tree {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
}

.folder-item {
  /* Container for folder and its children */
}

.folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.folder-row:hover {
  background: var(--bg-surface-1, #1a1d23);
}

.folder-row.selected {
  background: var(--accent-color, #3b82f6);
  color: white;
}

.folder-toggle {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-spacer {
  width: 18px;
  flex-shrink: 0;
}

.folder-name {
  flex: 1;
  font-size: 14px;
}

.asset-count {
  font-size: 12px;
  opacity: 0.7;
}

.folder-children {
  /* Nested folders will have increased padding via inline styles */
}

.dialog-buttons {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--border-color, #2a2e36) !important;
}

.delete-btn,
.keep-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  outline: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.delete-btn {
  background-color: var(--error, #dc3545) !important;
  color: white !important;
  border-color: var(--error, #dc3545) !important;
}

.delete-btn:hover:not(:disabled) {
  background-color: #c82333 !important;
  border-color: #c82333 !important;
  transform: translateY(-1px);
}

.delete-btn:active:not(:disabled) {
  background-color: #bd2130 !important;
  border-color: #bd2130 !important;
  transform: translateY(0);
}

.delete-btn:focus {
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3) !important;
}

.delete-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.keep-btn {
  background-color: var(--primary, #ff7b00) !important;
  color: white !important;
  border-color: var(--primary, #ff7b00) !important;
}

.keep-btn:hover:not(:disabled) {
  background-color: var(--primary-light, #ff9533) !important;
  border-color: var(--primary-light, #ff9533) !important;
  transform: translateY(-1px);
}

.keep-btn:active:not(:disabled) {
  background-color: var(--primary-dark, #cc6200) !important;
  border-color: var(--primary-dark, #cc6200) !important;
  transform: translateY(0);
}

.keep-btn:focus {
  box-shadow: 0 0 0 2px rgba(255, 123, 0, 0.3) !important;
}

.keep-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
._overlay_18ol1_1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal, 1000);
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 16px;
  opacity: 0;
  /* Performance optimization */
  will-change: opacity, backdrop-filter;
}

._overlay_18ol1_1._visible_18ol1_22 {
  opacity: 1;
}

._overlay_18ol1_1._hidden_18ol1_26 {
  opacity: 0;
}

._dialog_18ol1_30 {
  background:
    linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(35, 39, 47, 0.95) 100%);
  color: var(--modal-text-color, #f8f8f2);
  border-radius: 24px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.7) translateY(50px) rotate(-2deg);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  position: relative;
  /* Performance optimization */
  will-change: transform, opacity;
}

/* Animated background pattern */
._dialog_18ol1_30::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: _backgroundShift_18ol1_1 8s ease-in-out infinite;
}

@keyframes _backgroundShift_18ol1_1 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

._dialog_18ol1_30 > * {
  position: relative;
  z-index: 1;
}

._dialog_18ol1_30._visible_18ol1_22 {
  transform: scale(1) translateY(0) rotate(0deg);
  opacity: 1;
}

._dialog_18ol1_30._hidden_18ol1_26 {
  transform: scale(0.7) translateY(50px) rotate(-2deg);
  opacity: 0;
}

/* Dialog sizes */
._small_18ol1_91 {
  max-width: 400px;
}

._medium_18ol1_95 {
  max-width: 600px;
}

._large_18ol1_99 {
  max-width: 800px;
}

._header_18ol1_103 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px);
  position: relative;
}

/* Header shimmer effect */
._header_18ol1_103::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: _headerShimmer_18ol1_1 3s ease-in-out infinite;
}

@keyframes _headerShimmer_18ol1_1 {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

._title_18ol1_132 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary, #f8f8f2), #cdd6f4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: _titleGlow_18ol1_1 3s ease-in-out infinite alternate;
}

@keyframes _titleGlow_18ol1_1 {
  from { filter: brightness(1); }
  to { filter: brightness(1.1); }
}

._closeButton_18ol1_148 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary, #a6adc8);
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  padding: 0;
}

._closeButton_18ol1_148:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

._closeButton_18ol1_148:active {
  transform: scale(0.95);
}

/* Ripple effect */
._closeButton_18ol1_148::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

._closeButton_18ol1_148:active::before {
  width: 80px;
  height: 80px;
}

._content_18ol1_197 {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

._footer_18ol1_203 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-primary, #444444);
}

/* Light theme overrides */
:root[data-theme="light"] ._dialog_18ol1_30 {
  background-color: #ffffff;
  color: #1e293b;
  border-color: #e2e8f0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] ._header_18ol1_103 {
  border-bottom-color: var(--border-primary-light, #e7e7e7);
}

:root[data-theme="light"] ._title_18ol1_132 {
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] ._closeButton_18ol1_148 {
  color: var(--text-secondary-light, #666666);
}

:root[data-theme="light"] ._closeButton_18ol1_148:hover {
  background-color: var(--bg-hover-light, rgba(0, 0, 0, 0.05));
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] ._footer_18ol1_203 {
  border-top-color: var(--border-primary-light, #e7e7e7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  ._small_18ol1_91, ._medium_18ol1_95, ._large_18ol1_99 {
    max-width: 100%;
  }
  
  ._overlay_18ol1_1 {
    padding: 12px;
  }
  
  ._dialog_18ol1_30 {
    max-height: calc(100vh - 24px);
  }
}

@media (max-width: 480px) {
  ._header_18ol1_103 {
    padding: 20px 16px;
  }

  ._content_18ol1_197 {
    padding: 20px 16px;
  }

  ._footer_18ol1_203 {
    padding: 20px 16px;
    flex-direction: column-reverse;
    gap: 8px;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  ._overlay_18ol1_1,
  ._dialog_18ol1_30,
  ._header_18ol1_103,
  ._title_18ol1_132,
  ._closeButton_18ol1_148 {
    animation: none !important;
    transition: none !important;
  }

  ._dialog_18ol1_30::before,
  ._header_18ol1_103::before,
  ._closeButton_18ol1_148::before {
    animation: none !important;
  }

  ._closeButton_18ol1_148:hover,
  ._closeButton_18ol1_148:active {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  ._dialog_18ol1_30 {
    border-width: 2px;
    border-color: #ffffff;
  }

  ._closeButton_18ol1_148 {
    border-width: 2px;
  }

  ._closeButton_18ol1_148:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Focus styles for keyboard navigation */
._closeButton_18ol1_148:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Light theme adjustments */
:root[data-theme="light"] ._overlay_18ol1_1 {
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(135deg, rgba(0, 120, 212, 0.05) 0%, rgba(78, 205, 196, 0.05) 100%);
}

:root[data-theme="light"] ._dialog_18ol1_30 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] ._dialog_18ol1_30::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%);
}

:root[data-theme="light"] ._header_18ol1_103 {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] ._closeButton_18ol1_148 {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary-light, #666666);
}

:root[data-theme="light"] ._closeButton_18ol1_148:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
/* Enhanced Asset Create Modal - Modern 2025 UX */
.asset-create-modal {
  max-width: 540px;
}

.asset-create-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.asset-create-option {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #fff);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  width: 100%;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: optionSlideIn 0.5s ease-out both;
}

.asset-create-option:nth-child(1) { animation-delay: 0.1s; }
.asset-create-option:nth-child(2) { animation-delay: 0.2s; }
.asset-create-option:nth-child(3) { animation-delay: 0.3s; }

@keyframes optionSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.asset-create-option:hover {
  border-color: var(--option-color, var(--accent-color, #007acc));
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.asset-create-option:active {
  transform: translateY(-1px) scale(0.98);
}

.asset-create-option.selected {
  border-color: var(--option-color, var(--accent-color, #007acc));
  background: var(--accent-color-alpha, rgba(0, 122, 204, 0.1));
}

.option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: rgba(var(--option-color-rgb, 0, 122, 204), 0.1);
  flex-shrink: 0;
}

.option-content {
  flex: 1;
  min-width: 0;
}

.option-title {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.option-description {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #ccc);
  line-height: 1.4;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #333);
}

/* Responsive */
@media (max-width: 768px) {
  .asset-create-modal {
    max-width: 90vw;
  }
  
  .asset-create-option {
    padding: 0.75rem;
    gap: 0.75rem;
  }
  
  .option-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .option-title {
    font-size: 0.9rem;
  }
  
  .option-description {
    font-size: 0.8rem;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .asset-create-option {
    animation: none !important;
    transition: none !important;
  }

  .asset-create-option:hover,
  .asset-create-option:active {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .asset-create-option {
    border-width: 3px;
  }

  .asset-create-option:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Focus styles for keyboard navigation */
.asset-create-option:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Light theme adjustments */
[data-theme="light"] .asset-create-option {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-primary-light, #333333);
}

[data-theme="light"] .asset-create-option:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--option-color, var(--accent-color, #007acc));
}
/* Folder Create Modal Styles */
.folder-create-modal {
  max-width: 500px;
}

.folder-create-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.form-group input {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.form-group input.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.1);
}

.error-message {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--error);
  font-size: 12px;
  margin-top: 4px;
}

/* Location Tabs */
.location-tabs {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface-2);
}

.location-tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.location-tab:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
}

.location-tab.active {
  background: var(--primary);
  color: white;
}

.location-tab:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

/* Current Path Display */
.current-path {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.current-path svg {
  color: var(--text-tertiary);
}

/* Folder Tree */
.folder-tree {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface-1);
}

.folder-tree-item {
  border-bottom: 1px solid var(--border-color);
}

.folder-tree-item:last-child {
  border-bottom: none;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: var(--text-primary);
  min-height: 36px;
}

.folder-item:hover {
  background: var(--bg-surface-2);
}

.folder-item.selected {
  background: var(--primary);
  color: white;
}

.folder-item.selected svg {
  color: white;
}

.folder-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
  padding: 0;
  margin: 0;
}

.folder-toggle:hover {
  color: var(--text-primary);
}

.folder-item.selected .folder-toggle {
  color: white;
}

.folder-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-children {
  border-left: 1px solid var(--border-color);
  margin-left: 20px;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* Scrollbar Styling */
.folder-tree::-webkit-scrollbar {
  width: 6px;
}

.folder-tree::-webkit-scrollbar-track {
  background: var(--bg-surface-2);
}

.folder-tree::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.folder-tree::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
  .folder-create-modal {
    max-width: 90vw;
  }
  
  .folder-create-content {
    gap: 16px;
  }
  
  .folder-tree {
    max-height: 150px;
  }
  
  .location-tab {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .modal-actions {
    flex-direction: column-reverse;
  }
  
  .modal-actions button {
    width: 100%;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .form-group input {
    background: var(--bg-surface-3);
  }
  
  .location-tabs {
    background: var(--bg-surface-3);
  }
  
  .current-path {
    background: var(--bg-surface-2);
  }
  
  .folder-tree {
    background: var(--bg-surface-2);
  }
}
/* Asset Context Menu Styles */
.asset-context-menu {
  position: fixed;
  background: var(--bg-surface-2, #252530);
  border: 1px solid var(--border-color, #3a3a4a);
  border-radius: 8px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  min-width: 200px;
  max-width: 280px;
  padding: 6px;
  z-index: 10000;
  font-size: 13px;
  animation: contextMenuSlideIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

@keyframes contextMenuSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  text-align: left;
  position: relative;
}

.context-menu-item:hover:not(.disabled) {
  background: var(--bg-surface-3, #3a3a4a);
  color: var(--text-primary, #ffffff);
}

.context-menu-item:active:not(.disabled) {
  background: var(--primary, #007bff);
  color: white;
}

.context-menu-item.disabled {
  color: var(--text-tertiary, #666);
  cursor: not-allowed;
  opacity: 0.5;
}

.context-menu-item.danger {
  color: var(--error, #ff4757);
}

.context-menu-item.danger:hover:not(.disabled) {
  background: rgba(255, 71, 87, 0.1);
  color: var(--error, #ff4757);
}

.context-menu-item.danger:active:not(.disabled) {
  background: var(--error, #ff4757);
  color: white;
}

.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.menu-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-shortcut {
  font-size: 11px;
  color: var(--text-tertiary, #666);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  background: var(--bg-surface-1, #1e1e1e);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-color, #3a3a4a);
  flex-shrink: 0;
}

.context-menu-separator {
  height: 1px;
  background: var(--border-color, #3a3a4a);
  margin: 4px 0;
  opacity: 0.5;
}

/* Light theme support */
[data-theme="light"] .asset-context-menu {
  background: var(--bg-surface-2, #ffffff);
  border-color: var(--border-color, #e5e5e5);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .context-menu-item {
  color: var(--text-primary, #1f2937);
}

[data-theme="light"] .context-menu-item:hover:not(.disabled) {
  background: var(--bg-surface-3, #f3f4f6);
}

[data-theme="light"] .context-menu-item.disabled {
  color: var(--text-tertiary, #9ca3af);
}

[data-theme="light"] .menu-shortcut {
  background: var(--bg-surface-1, #f9fafb);
  color: var(--text-tertiary, #6b7280);
  border-color: var(--border-color, #d1d5db);
}

[data-theme="light"] .context-menu-separator {
  background: var(--border-color, #e5e7eb);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .asset-context-menu {
    border-width: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }
  
  .context-menu-item {
    border: 1px solid transparent;
  }
  
  .context-menu-item:hover:not(.disabled) {
    border-color: var(--primary, #007bff);
  }
  
  .context-menu-item:focus-visible {
    outline: 2px solid var(--primary, #007bff);
    outline-offset: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .asset-context-menu {
    animation: none;
  }
  
  .context-menu-item {
    transition: none;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .asset-context-menu {
    min-width: 180px;
    font-size: 14px;
  }
  
  .context-menu-item {
    padding: 12px 16px;
    gap: 12px;
  }
  
  .menu-icon {
    width: 18px;
    height: 18px;
  }
  
  .menu-shortcut {
    display: none; /* Hide shortcuts on mobile */
  }
}

/* Touch device support */
@media (hover: none) and (pointer: coarse) {
  .context-menu-item {
    padding: 14px 16px;
    min-height: 44px; /* Minimum touch target size */
  }
  
  .context-menu-item:hover {
    background: none; /* Disable hover on touch devices */
  }
  
  .context-menu-item:active:not(.disabled) {
    background: var(--primary, #007bff);
    color: white;
  }
}

/* Keyboard navigation */
.context-menu-item:focus-visible {
  outline: 2px solid var(--primary, #007bff);
  outline-offset: -2px;
  background: var(--bg-surface-3, #3a3a4a);
}

/* Context menu positioning helpers */
.asset-context-menu.position-top {
  transform-origin: bottom center;
}

.asset-context-menu.position-bottom {
  transform-origin: top center;
}

.asset-context-menu.position-left {
  transform-origin: right center;
}

.asset-context-menu.position-right {
  transform-origin: left center;
}

/* Submenu support (for future expansion) */
.context-menu-item.has-submenu::after {
  content: '▶';
  margin-left: auto;
  font-size: 10px;
  color: var(--text-tertiary, #666);
}

.context-menu-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 4px;
}

/* Selection indicator for multi-select actions */
.context-menu-item.multi-select {
  position: relative;
}

.context-menu-item.multi-select::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--primary, #007bff);
  border-radius: 1px;
  opacity: 0.7;
}
/* Asset Rename Modal Styles */
.asset-rename-modal {
  max-width: 450px;
}

.rename-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

/* Item Info Section */
.item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-surface-1, #1e1e1e);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 8px;
}

.item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-surface-2, #252530);
  border-radius: 8px;
  flex-shrink: 0;
}

.folder-icon {
  color: var(--primary, #007bff);
}

.file-icon {
  color: var(--text-secondary, #888);
}

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

.item-type {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.current-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Form Group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #fff);
}

.form-group input {
  padding: 12px;
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 8px;
  background: var(--bg-surface-2, #252530);
  color: var(--text-primary, #fff);
  font-size: 14px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary, #007bff);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 123, 255), 0.1);
}

.form-group input.error {
  border-color: var(--error, #ff4757);
  box-shadow: 0 0 0 3px rgba(var(--error-rgb, 255, 71, 87), 0.1);
}

.form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--error, #ff4757);
  font-size: 12px;
  margin-top: 4px;
}

/* Rename Tips */
.rename-tips {
  padding: 16px;
  background: var(--bg-surface-1, #1e1e1e);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 8px;
  border-left: 4px solid var(--primary, #007bff);
}

.rename-tips h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 8px 0;
}

.rename-tips ul {
  margin: 0;
  padding-left: 16px;
  list-style-type: disc;
}

.rename-tips li {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin-bottom: 4px;
  line-height: 1.4;
}

.rename-tips li:last-child {
  margin-bottom: 0;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #2a2e36);
}

/* Light Theme Support */
[data-theme="light"] .item-info {
  background: var(--bg-surface-1, #f9fafb);
  border-color: var(--border-color, #e5e7eb);
}

[data-theme="light"] .item-icon {
  background: var(--bg-surface-2, #ffffff);
}

[data-theme="light"] .item-type {
  color: var(--text-tertiary, #6b7280);
}

[data-theme="light"] .current-name {
  color: var(--text-primary, #1f2937);
}

[data-theme="light"] .form-group label {
  color: var(--text-primary, #1f2937);
}

[data-theme="light"] .form-group input {
  background: var(--bg-surface-2, #ffffff);
  border-color: var(--border-color, #d1d5db);
  color: var(--text-primary, #1f2937);
}

[data-theme="light"] .rename-tips {
  background: var(--bg-surface-1, #f9fafb);
  border-color: var(--border-color, #e5e7eb);
}

[data-theme="light"] .rename-tips h4 {
  color: var(--text-primary, #1f2937);
}

[data-theme="light"] .rename-tips li {
  color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .modal-actions {
  border-color: var(--border-color, #e5e7eb);
}

/* Responsive Design */
@media (max-width: 768px) {
  .asset-rename-modal {
    max-width: 90vw;
  }
  
  .rename-content {
    gap: 16px;
  }
  
  .item-info {
    padding: 12px;
  }
  
  .item-icon {
    width: 36px;
    height: 36px;
  }
  
  .rename-tips {
    padding: 12px;
  }
  
  .modal-actions {
    flex-direction: column-reverse;
  }
  
  .modal-actions button {
    width: 100%;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .item-info,
  .rename-tips {
    border-width: 2px;
  }
  
  .form-group input {
    border-width: 2px;
  }
  
  .form-group input:focus {
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 0, 123, 255), 0.3);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .form-group input {
    transition: none;
  }
}

/* Focus Styles */
.form-group input:focus-visible {
  outline: 2px solid var(--primary, #007bff);
  outline-offset: 2px;
}

/* Selection Styles */
.form-group input::selection {
  background: var(--primary, #007bff);
  color: white;
}

/* Placeholder Styles */
.form-group input::placeholder {
  color: var(--text-tertiary, #666);
  opacity: 0.7;
}

[data-theme="light"] .form-group input::placeholder {
  color: var(--text-tertiary, #9ca3af);
}
.context-aware-asset-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.95) 0%, rgba(30, 30, 46, 0.95) 100%);
  color: var(--sidebar-text, #cccccc);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  border-radius: 16px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  /* Entrance animation */
  animation: assetPanelSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes assetPanelSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated background pattern */
.context-aware-asset-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: assetBackgroundShift 8s ease-in-out infinite;
}

@keyframes assetBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.context-aware-asset-panel > * {
  position: relative;
  z-index: 1;
}

/* Enhanced Header */
.asset-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px);
  min-height: 48px;
  position: relative;
  /* Staggered entrance animation */
  animation: assetHeaderSlideIn 0.5s ease-out 0.2s both;
}

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

/* Header shimmer effect */
.asset-panel-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
  animation: assetHeaderShimmer 4s ease-in-out infinite;
}

@keyframes assetHeaderShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.asset-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-primary, #f8f8f2) !important;
  /* Remove gradient text effect to ensure visibility */
}

/* Ensure text is always visible - force override all gradient effects */
.asset-panel-title span,
.asset-panel-title * {
  color: var(--text-primary, #f8f8f2) !important;
  -webkit-text-fill-color: var(--text-primary, #f8f8f2) !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

/* Dark theme text visibility */
[data-theme="dark"] .asset-panel-title,
[data-theme="dark"] .asset-panel-title span,
[data-theme="dark"] .asset-panel-title * {
  color: #f8f8f2 !important;
  -webkit-text-fill-color: #f8f8f2 !important;
}

/* Light theme text visibility */
[data-theme="light"] .asset-panel-title,
[data-theme="light"] .asset-panel-title span,
[data-theme="light"] .asset-panel-title * {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}

@keyframes assetTitleGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.1); }
}

.asset-panel-subtitle {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary, #a0a0a0);
  text-transform: none;
  letter-spacing: normal;
  font-style: italic;
}

.context-indicator {
  font-size: 10px;
  color: var(--muted-text, #6c6c6c);
  font-weight: normal;
  opacity: 0.7;
}

/* Actions and Controls - Reorganized Layout */
.asset-panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
  gap: 8px;
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-label {
  font-size: 12px;
  color: var(--text-secondary, #a0a0a0);
  font-weight: 500;
  margin-right: 4px;
}

.view-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #a0a0a0);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 32px;
  height: 32px;
}

.view-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--text-primary, #cccccc);
  transform: translateY(-1px);
}

.view-toggle-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(59, 130, 246, 0.2));
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--text-primary, #ffffff);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.view-toggle-btn svg {
  width: 16px;
  height: 16px;
}

.action-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.create-menu-container {
  position: relative;
}

.create-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-secondary, #2d2d30);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 160px;
  margin-top: 4px;
}

.create-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text-primary, #cccccc);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.create-menu-item:hover {
  background: var(--button-hover-bg, #2a2d2e);
}

.create-menu-item:first-child {
  border-radius: 4px 4px 0 0;
}

.create-menu-item:last-child {
  border-radius: 0 0 4px 4px;
}

.asset-panel-actions button,
.view-controls button,
.action-controls button {
  background: none;
  border: none;
  color: var(--header-text, #cccccc);
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  min-width: 24px;
  height: 24px;
}

.asset-panel-actions button svg,
.view-controls button svg,
.action-controls button svg {
  width: 14px;
  height: 14px;
}

.asset-panel-actions button:hover,
.view-controls button:hover,
.action-controls button:hover {
  background: var(--button-hover-bg, #2a2d2e);
}

.asset-panel-actions button.active,
.view-controls button.active,
.action-controls button.active {
  background: var(--accent-color, #007acc);
  color: white;
}

.asset-panel-actions button:disabled,
.view-controls button:disabled,
.action-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Search - File Explorer Style */
.asset-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
}

.asset-search input {
  flex: 1;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid var(--input-border, #464647);
  color: var(--input-text, #cccccc);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
}

.asset-search input:focus {
  border-color: var(--primary, #007acc);
}

.asset-search input::placeholder {
  color: var(--placeholder-text, #6c6c6c);
}

.asset-search svg {
  width: 14px;
  height: 14px;
  color: var(--text-secondary, #a0a0a0);
  flex-shrink: 0;
}





/* Search */
.asset-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
}



.asset-search input {
  flex: 1;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid var(--input-border, #464647);
  color: var(--input-text, #cccccc);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.asset-search input:focus {
  border-color: var(--primary, #007acc);
}

.asset-search input::placeholder {
  color: var(--placeholder-text, #6c6c6c);
}

/* Content */
.asset-panel-content {
  flex: 1;
  overflow: auto;
  padding: 4px 0;
  position: relative; /* Required for absolute positioned progress bar */
}

/* Asset Tree View - File Explorer Style */
.asset-tree-view {
  width: 100%;
  padding: 0;
}

.asset-tree-node {
  width: 100%;
}

.asset-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 10px;
  min-height: 36px;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  margin: 1px 4px;
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: assetItemSlideIn 0.5s ease-out both;
}

.asset-tree-item:nth-child(1) { animation-delay: 0.05s; }
.asset-tree-item:nth-child(2) { animation-delay: 0.1s; }
.asset-tree-item:nth-child(3) { animation-delay: 0.15s; }
.asset-tree-item:nth-child(4) { animation-delay: 0.2s; }
.asset-tree-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes assetItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.asset-tree-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.asset-tree-item:active {
  transform: translateY(0) scale(0.99);
}

/* Asset item shimmer effect */
.asset-tree-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.asset-tree-item:hover::before {
  left: 100%;
}

.asset-tree-item.selected {
  background: var(--selected-bg, #37373d);
  color: var(--selected-text, #ffffff);
}

.asset-tree-item.folder-item {
  font-weight: 500;
}

.asset-tree-item.asset-item {
  font-weight: normal;
}

.folder-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  border-radius: 2px;
  transition: background-color 0.1s;
  flex-shrink: 0;
}

.folder-toggle:hover {
  background: var(--toggle-hover-bg, #2a2d2e);
}

.folder-toggle svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: opacity 0.1s;
}

.folder-toggle:hover svg {
  opacity: 1;
}

.node-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.asset-count {
  font-size: 11px;
  color: var(--text-secondary, #a0a0a0);
  opacity: 0.7;
}

.asset-size {
  font-size: 11px;
  color: var(--text-secondary, #a0a0a0);
  opacity: 0.7;
  margin-left: auto;
}

.asset-spacer {
  width: 16px;
  flex-shrink: 0;
}

/* Drag feedback for tree items */
.asset-tree-item:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.asset-tree-item[draggable="true"] {
  cursor: grab;
}

.asset-tree-item[draggable="true"]:active {
  cursor: grabbing;
}

.asset-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--muted-text, #6c6c6c);
  font-style: italic;
}

/* Asset Sections */
.asset-section {
  margin-bottom: 0.75rem;
}

.asset-section:last-child {
  margin-bottom: 0;
}

.asset-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--header-text, #cccccc);
  background: var(--header-bg, #252526);
  border-bottom: 1px solid var(--border-color, #333);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
  height: 24px;
}

.asset-section-header:hover {
  background: var(--hover-bg, #2a2d2e);
}

/* Section toggle button - File Explorer Style */
.section-toggle {
  background: none;
  border: none;
  color: var(--header-text, #cccccc);
  padding: 2px;
  margin-right: 6px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.section-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

.section-toggle:hover {
  background: var(--button-hover-bg, #2a2d2e);
}

.section-toggle.collapsed svg {
  transform: rotate(-90deg);
}

.section-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-description {
  font-size: 9px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted-text, #6c6c6c);
  opacity: 0.8;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-btn {
  background: none;
  border: 1px solid var(--border-color, #333);
  color: var(--text-secondary, #a0a0a0);
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 12px;
}

.upload-btn:hover {
  background: var(--accent-color, #007acc);
  border-color: var(--accent-color, #007acc);
  color: white;
}

.upload-btn:active {
  transform: scale(0.95);
}

.asset-count {
  font-size: 10px;
  color: var(--muted-text, #6c6c6c);
  font-weight: normal;
  opacity: 0.7;
}

/* Grid View */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  padding: 16px;
}

.asset-grid-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 10px;
  background: var(--bg-surface-2, #1a1d23);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.asset-grid-item:hover {
  border-color: var(--accent-color, #007bff);
  background: var(--bg-surface-3, #2a2e36);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.15);
}

.asset-grid-item.selected {
  border-color: var(--accent-color, #007bff);
  background: rgba(0, 123, 255, 0.1);
}

/* Folder grid item styles */
.folder-grid-item {
  background: var(--bg-surface-1, #1e1e1e);
  border: 2px dashed var(--border-color, #2a2e36);
  min-height: 120px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.folder-grid-item:hover {
  border-color: var(--primary, #007bff);
  background: var(--bg-surface-2, #252530);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.folder-icon-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.folder-icon {
  color: var(--primary, #007bff);
  opacity: 0.8;
}

.folder-item-count {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--primary, #007bff);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* Breadcrumb navigation */
.folder-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-surface-1, #1e1e1e);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  grid-column: 1 / -1; /* Span full width in grid */
}

.breadcrumb-item {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 13px;
}

.breadcrumb-item:hover {
  background: var(--bg-surface-2, #252530);
  color: var(--text-primary, #fff);
}

.breadcrumb-item:last-child {
  color: var(--text-primary, #fff);
  font-weight: 500;
}

.breadcrumb-separator {
  color: var(--text-tertiary, #666);
  margin: 0 2px;
}

/* Legacy thumbnail styles - keeping for compatibility */
.asset-thumbnail {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 6px;
  background: var(--bg-surface-1, #181a20);
  overflow: hidden;
  flex-shrink: 0;
}

/* Enhanced thumbnail integration */
.asset-grid-thumbnail {
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.asset-list-thumbnail {
  width: 40px;
  height: 30px;
  margin-right: 8px;
  flex-shrink: 0;
  border-radius: 4px;
}

/* Thumbnail hover effects in grid */
.asset-grid-item:hover .asset-grid-thumbnail {
  transform: scale(1.02);
}

/* Responsive grid thumbnails */
@media (max-width: 768px) {
  .asset-grid-thumbnail {
    height: 60px;
  }

  .asset-list-thumbnail {
    width: 32px;
    height: 24px;
  }
}

.asset-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-icon {
  color: var(--text-secondary, #a0a0a0);
}

.asset-info {
  flex: 1;
}

.asset-name {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-meta {
  font-size: 11px;
  color: var(--muted-text, #6c6c6c);
}

.asset-type {
  font-size: 10px;
  font-weight: 500;
  color: var(--sidebar-text, #cccccc);
  margin-bottom: 2px;
}

.asset-details {
  font-size: 10px;
  color: var(--muted-text, #6c6c6c);
}

.asset-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.asset-grid-item:hover .asset-actions {
  opacity: 1;
}

.asset-action-btn {
  padding: 4px;
  border: none;
  border-radius: 4px;
  background: var(--bg-surface-3, #2a2e36);
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  transition: all 0.2s ease;
}

.asset-action-btn:hover {
  background: var(--accent-color, #007bff);
  color: white;
}

/* List View */
.asset-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asset-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.1s;
  border-radius: 0;
}

.asset-list-item:hover {
  background: var(--hover-bg, #2a2d2e);
}

.asset-list-item.selected {
  background: var(--selected-bg, #37373d);
  color: var(--selected-text, #ffffff);
}

.asset-icon-small {
  flex-shrink: 0;
  opacity: 0.8;
}

.asset-details {
  flex: 1;
}

.asset-list-item .asset-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-list-item .asset-meta {
  font-size: 11px;
  color: var(--muted-text, #6c6c6c);
  margin-top: 2px;
}

.asset-list-item .asset-actions {
  opacity: 0;
  margin-top: 0;
}

.asset-list-item:hover .asset-actions {
  opacity: 1;
}

/* Empty State */
.asset-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary, #a0a0a0);
  border: 2px dashed var(--border-color, #2a2e36);
  border-radius: 8px;
  background: var(--bg-surface-1, #181a20);
  cursor: pointer;
  transition: all 0.2s ease;
}

.asset-empty:hover {
  border-color: var(--accent-color, #007bff);
  background: var(--bg-surface-2, #1a1d23);
  color: var(--text-primary, #e5e7eb);
}

.asset-empty p {
  margin: 8px 0 0 0;
  font-size: 14px;
}

.asset-empty p:first-of-type {
  font-weight: 500;
  color: var(--sidebar-text, #cccccc);
  margin-bottom: 8px;
}

.asset-empty-description {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-text, #6c6c6c);
  text-align: center;
}

/* Upload Hint - Fixed at bottom */
.upload-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  margin: 12px;
  border: 1px dashed var(--border-color, #2a2e36);
  border-radius: 6px;
  background: var(--bg-surface-1, #181a20);
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  opacity: 0.8;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.upload-hint:hover {
  border-color: var(--accent-color, #007bff);
  background: var(--bg-surface-2, #1a1d23);
  color: var(--text-primary, #e5e7eb);
  opacity: 1;
  transform: translateY(-1px);
}

.upload-hint span {
  font-weight: 500;
}

/* Make asset tab content take full height */
.asset-tab-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px); /* Account for tabs height */
  overflow: hidden;
}

.asset-grid,
.asset-list {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px; /* Space for upload hint */
}

/* Ensure the asset panel container takes full height */
.context-aware-asset-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Upload Progress */
.upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-surface-2, #1a1d23);
  border-top: 1px solid var(--border-color, #2a2e36);
  padding: 12px 16px;
  z-index: 10; /* Ensure it appears above other content */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}

.upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.upload-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary, #e5e7eb);
  font-weight: 500;
  min-width: 120px;
}

.upload-item:last-child {
  margin-bottom: 0;
}

.upload-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-surface-3, #2a2e36);
  border-radius: 2px;
  overflow: hidden;
}

.upload-fill {
  height: 100%;
  background: var(--accent-color, #007bff);
  transition: width 0.3s ease;
}

.upload-item span {
  font-size: 12px;
  color: var(--text-secondary, #a0a0a0);
  min-width: 40px;
  text-align: right;
}

/* Drag and Drop */
.asset-panel-content.drag-over {
  background: var(--external-drag-zone-bg, rgba(74, 222, 128, 0.1));
  border: 2px dashed var(--external-drag-border, #4ade80);
  border-radius: 6px;
}

.asset-panel-content.drag-over .asset-empty {
  border-color: var(--external-drag-border, #4ade80);
  background: var(--external-drag-bg, #1a3d1a);
  color: var(--sidebar-text, #cccccc);
}

.asset-panel-content.drag-over .asset-empty p {
  color: var(--sidebar-text, #cccccc);
}

/* Scrollbar styling */
.asset-panel-content::-webkit-scrollbar {
  width: 8px;
}

.asset-panel-content::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #1e1e1e);
}

.asset-panel-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #424242);
  border-radius: 4px;
}

.asset-panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #4f4f4f);
}

/* Document Items */
.document-item {
  border-left: 3px solid var(--accent-color, #007acc);
  background: var(--bg-surface-2, #1a1d23);
}

.document-item:hover {
  background: var(--bg-surface-3, #252830);
  border-left-color: var(--accent-color-hover, #1a8cff);
}

.document-item .asset-type {
  color: var(--accent-color, #007acc);
  font-weight: 500;
}

.document-item .asset-actions {
  opacity: 0.7;
}

.document-item:hover .asset-actions {
  opacity: 1;
}

/* AI Generation Section */
.ai-generation-content {
  padding: 8px 12px;
}

.ai-generation-prompt {
  padding: 20px;
  text-align: center;
}

.ai-prompt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: var(--bg-surface-2, #1a1d23);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 8px;
  color: var(--text-secondary, #a0a0a0);
}



/* AI Generation Panel */
.ai-generation-panel {
  background: var(--bg-surface-2, #1a1d23);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 8px;
  margin: 8px 0;
  overflow: hidden;
  animation: slideDown 0.2s ease-out;
}

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

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-surface-3, #252830);
  border-bottom: 1px solid var(--border-color, #2a2e36);
}

.ai-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
}

.ai-panel-close {
  background: none;
  border: none;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.ai-panel-close:hover {
  background: var(--bg-surface-1, #181a20);
  color: var(--text-primary, #e5e7eb);
}

.ai-generation-form {
  padding: 16px;
}

.ai-type-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ai-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-surface-1, #181a20);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 6px;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
}

.ai-type-btn:hover {
  background: var(--bg-surface-3, #252830);
  border-color: var(--accent-color, #007bff);
  color: var(--text-primary, #e5e7eb);
}

.ai-type-btn.active {
  background: var(--accent-color, #007bff);
  border-color: var(--accent-color, #007bff);
  color: white;
}

/* Audio Sub-Options */
.audio-sub-options {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-surface-0, #0f1419);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 8px;
}

.sub-options-label {
  display: block;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
  margin-bottom: 8px;
  font-size: 13px;
}

.sub-options-buttons {
  display: flex;
  gap: 6px;
}

.sub-option-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-surface-1, #181a20);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 4px;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 500;
}

.sub-option-btn:hover {
  background: var(--bg-surface-2, #1f2329);
  border-color: var(--accent-color, #007bff);
  color: var(--text-primary, #e5e7eb);
}

.sub-option-btn.active {
  background: var(--accent-color, #007bff);
  border-color: var(--accent-color, #007bff);
  color: white;
}

.ai-prompt-input {
  margin-bottom: 16px;
}

.ai-prompt-label {
  display: block;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
  margin-bottom: 8px;
  font-size: 14px;
}

.ai-prompt-input textarea {
  width: 100%;
  padding: 12px;
  background: var(--bg-surface-1, #181a20);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 6px;
  color: var(--text-primary, #e5e7eb);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.ai-prompt-input textarea:focus {
  outline: none;
  border-color: var(--accent-color, #007bff);
}

.ai-prompt-input textarea::placeholder {
  color: var(--text-secondary, #a0a0a0);
}

.ai-prompt-hint {
  font-size: 12px;
  color: var(--text-secondary, #a0a0a0);
  margin-top: 6px;
  font-style: italic;
}

.ai-generation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-generate-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent-color, #007bff);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-generate-action-btn:hover:not(:disabled) {
  background: var(--accent-color-hover, #0056b3);
  transform: translateY(-1px);
}

.ai-generate-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.ai-context-hint {
  font-size: 12px;
  color: var(--text-secondary, #a0a0a0);
  font-style: italic;
}

.ai-generate-btn {
  background: none;
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 4px;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  padding: 6px 8px;
  transition: all 0.2s ease;
  margin-right: 8px;
}

.ai-generate-btn:hover {
  background: var(--bg-surface-3, #252830);
  border-color: var(--accent-color, #007bff);
  color: var(--accent-color, #007bff);
}

.ai-generate-btn.active {
  background: var(--accent-color, #007bff);
  border-color: var(--accent-color, #007bff);
  color: white;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}





/* Enhanced empty state */
.asset-empty {
  text-align: center;
  padding: 40px 20px;
}

.asset-empty p {
  margin: 8px 0;
}

.asset-empty-description {
  color: var(--text-secondary, #a0a0a0);
  font-size: 14px;
}

/* AI Generated Asset Badge */
.ai-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: white;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.asset-grid-item.ai-generated {
  border: 2px solid rgba(139, 92, 246, 0.3);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
}

.asset-grid-item.ai-generated:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
}

/* Drag feedback */
.asset-grid-item:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.asset-list-item:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* Asset Tabs - File Explorer Style */
.asset-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--header-bg, #252526);
  padding: 0 8px;
  gap: 0;
}

.asset-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #a0a0a0);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 4px 4px 0 0;
  margin: 0 1px;
  position: relative;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 0;
}

.asset-tab:hover {
  background: var(--hover-bg, #2a2d2e);
  color: var(--text-primary, #cccccc);
}

.asset-tab.active {
  background: var(--sidebar-bg, #1e1e1e);
  color: var(--text-primary, #ffffff);
  border-bottom: 1px solid var(--sidebar-bg, #1e1e1e);
  margin-bottom: -1px;
}

.asset-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: var(--sidebar-bg, #1e1e1e);
}

/* Context Menu */
.asset-context-menu {
  background: var(--bg-surface-1, #ffffff);
  border: 1px solid var(--border-color, #ccc);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  min-width: 180px;
  padding: 4px 0;
}

.context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.15s ease;
}

.context-menu-item:hover {
  background: var(--hover-bg, #f5f5f5);
}

.context-menu-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* File Explorer Enhancements */
.asset-list-item.selected {
  background: var(--selected-bg, #007acc);
  color: var(--selected-text, #ffffff);
}

.asset-list-item.drag-over {
  background: var(--drag-over-bg, #e3f2fd);
  border: 2px dashed var(--primary, #007acc);
}

.asset-list-item:focus {
  outline: 2px solid var(--primary, #007acc);
  outline-offset: -2px;
}

/* Rename Input */
.asset-list-item input[type="text"] {
  background: white;
  border: 1px solid var(--primary, #007acc);
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 13px;
  width: 100%;
  outline: none;
}

/* Selection Indicators */
.asset-list-item.selected .asset-name {
  font-weight: 600;
}

.asset-list-item.selected .asset-meta {
  color: rgba(255, 255, 255, 0.8);
}

/* Drag Feedback */
.asset-list-item:active {
  transform: scale(0.98);
  opacity: 0.8;
}

.asset-grid-item:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* Keyboard Navigation */
.asset-list-item:focus-visible {
  outline: 2px solid var(--primary, #007acc);
  outline-offset: -2px;
}

/* Multi-selection */
.asset-list-item.multi-selected {
  background: var(--multi-selected-bg, #e3f2fd);
  border-left: 3px solid var(--primary, #007acc);
}

/* Dark Mode Context Menu */
@media (prefers-color-scheme: dark) {
  .asset-context-menu {
    background: var(--bg-surface-1, #2d2d2d);
    border-color: var(--border-color, #444);
    color: var(--text-primary, #ffffff);
  }

  .context-menu-item:hover {
    background: var(--hover-bg, #404040);
  }

  .asset-list-item.drag-over {
    background: var(--drag-over-bg, #1a237e);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .asset-panel-header {
    padding: 4px 8px;
  }

  .asset-panel-title {
    font-size: 10px;
  }

  .asset-panel-actions {
    padding: 6px 8px;
    gap: 6px;
  }

  .view-controls {
    gap: 2px;
  }

  .action-controls {
    gap: 6px;
  }

  .asset-search {
    padding: 6px 8px;
  }

  .asset-search input {
    font-size: 12px;
  }

  .asset-tabs {
    padding: 0 4px;
  }

  .asset-tab {
    padding: 6px 12px;
    font-size: 11px;
  }

  .asset-section-header {
    padding: 6px 8px;
  }

  .asset-context-menu {
    min-width: 160px;
  }

  .context-menu-item {
    padding: 10px 12px;
    font-size: 16px;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .context-aware-asset-panel,
  .asset-panel-header,
  .asset-tree-item,
  .asset-list-item,
  .asset-grid-item {
    animation: none !important;
    transition: none !important;
  }

  .context-aware-asset-panel::before,
  .asset-panel-header::before,
  .asset-tree-item::before {
    animation: none !important;
  }

  .asset-tree-item:hover,
  .asset-list-item:hover,
  .asset-grid-item:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .context-aware-asset-panel {
    border-width: 2px;
    border-color: #ffffff;
  }

  .asset-tree-item,
  .asset-list-item,
  .asset-grid-item {
    border-width: 2px;
  }

  .asset-tree-item:hover,
  .asset-list-item:hover,
  .asset-grid-item:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Focus styles for keyboard navigation */
.asset-tree-item:focus-visible,
.asset-list-item:focus-visible,
.asset-grid-item:focus-visible,
.asset-action-button:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* Enhanced light theme adjustments */
[data-theme="light"] .context-aware-asset-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .context-aware-asset-panel::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .asset-panel-header {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .asset-tree-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .asset-tree-item:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(245, 158, 11, 0.4);
}
.asset-thumbnail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg-surface-1, #181a20);
  overflow: hidden;
  border: 1px solid var(--border-color, #2a2e36);
  transition: all 0.2s ease;
}

.asset-thumbnail:hover {
  border-color: var(--accent-color, #007bff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

/* Size variants */
.asset-thumbnail-small {
  border-radius: 4px;
}

.asset-thumbnail-medium {
  border-radius: 6px;
}

.asset-thumbnail-large {
  border-radius: 8px;
}

/* Thumbnail image */
.asset-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.2s ease;
}

.asset-thumbnail:hover .asset-thumbnail-image {
  transform: scale(1.05);
}

/* Thumbnail icon fallback */
.asset-thumbnail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-secondary, #a0a0a0);
  background: var(--bg-surface-2, #1a1d23);
  border-radius: inherit;
}

/* Loading state */
.asset-thumbnail-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--accent-color, #007bff);
  background: var(--bg-surface-2, #1a1d23);
  border-radius: inherit;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Asset type indicator */
.asset-type-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(4px);
}

.asset-thumbnail:hover .asset-type-indicator {
  opacity: 1;
}

.asset-type-indicator svg {
  width: 12px;
  height: 12px;
}

/* Duration indicator */
.asset-duration-indicator {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  font-family: 'Segoe UI', monospace;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.asset-thumbnail:hover .asset-duration-indicator {
  opacity: 1;
}

/* Enhanced grid view integration */
.asset-grid-item .asset-thumbnail {
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Enhanced list view integration */
.asset-list-item .asset-thumbnail {
  margin-right: 8px;
  flex-shrink: 0;
}

/* Preview overlay for enhanced interaction */
.asset-thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.asset-thumbnail:hover::before {
  transform: translateX(100%);
}

/* Error state */
.asset-thumbnail-error {
  background: var(--bg-surface-2, #1a1d23);
  border-color: var(--error-color, #dc3545);
}

.asset-thumbnail-error .asset-thumbnail-icon {
  color: var(--error-color, #dc3545);
  opacity: 0.7;
}

/* Loading skeleton */
.asset-thumbnail-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface-1, #181a20) 25%,
    var(--bg-surface-2, #1a1d23) 50%,
    var(--bg-surface-1, #181a20) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .asset-thumbnail {
    border-width: 2px;
  }
  
  .asset-type-indicator,
  .asset-duration-indicator {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid white;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .asset-thumbnail,
  .asset-thumbnail-image,
  .asset-type-indicator,
  .asset-duration-indicator,
  .asset-thumbnail::before {
    transition: none;
  }
  
  .asset-thumbnail:hover .asset-thumbnail-image {
    transform: none;
  }
  
  .asset-thumbnail:hover {
    transform: none;
  }
  
  .spinning {
    animation: none;
  }
  
  .asset-thumbnail-skeleton {
    animation: none;
  }
}

/* Focus styles for accessibility */
.asset-thumbnail:focus-within {
  outline: 2px solid var(--accent-color, #007bff);
  outline-offset: 2px;
}

/* Dark theme enhancements */
@media (prefers-color-scheme: dark) {
  .asset-thumbnail {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .asset-thumbnail:hover {
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
  }
}
._toggleGroup_aanrq_1 {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

._toggleButton_aanrq_8 {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--border-color) !important;
}

._toggleButton_aanrq_8:last-child {
  border-right: none !important;
}

._toggleButton_aanrq_8._first_aanrq_18 {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

._toggleButton_aanrq_8._last_aanrq_23 {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

/* Light theme overrides */
:root[data-theme="light"] ._toggleGroup_aanrq_1 {
  border-color: var(--border-color);
}

:root[data-theme="light"] ._toggleButton_aanrq_8 {
  border-right-color: var(--border-color) !important;
}
._controls_1rwio_1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-bottom: none;
  background: var(--sidebar-bg, #1e1e1e);
}

/* Enhanced Header - Modern 2025 Style */
._header_1rwio_11 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px);
  min-height: 48px;
  position: relative;
  overflow: hidden;
  /* Header entrance animation */
  animation: _blockHeaderSlideIn_1rwio_1 0.5s ease-out 0.2s both;
}

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

/* Header background pattern */
._header_1rwio_11::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

._header_1rwio_11 > * {
  position: relative;
  z-index: 1;
}

._title_1rwio_57 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #f8f8f2);
  /* Title entrance animation */
  animation: _blockTitleSlideIn_1rwio_1 0.5s ease-out 0.4s both;
}

@keyframes _blockTitleSlideIn_1rwio_1 {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Search - File Explorer Style */
._search_1rwio_80 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
}

._search_1rwio_80 input {
  flex: 1;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid var(--input-border, #464647);
  color: var(--input-text, #cccccc);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
  min-width: 0;
}

._search_1rwio_80 input:focus {
  border-color: var(--primary, #007acc);
}

._search_1rwio_80 input::placeholder {
  color: var(--placeholder-text, #6c6c6c);
}

/* Actions and Controls - Reorganized Layout */
._actions_1rwio_110 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
  gap: 8px;
}

._viewControls_1rwio_120 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._viewLabel_1rwio_126 {
  font-size: 12px;
  color: var(--text-secondary, #a0a0a0);
  font-weight: 500;
}

._actionControls_1rwio_132 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._topRow_1rwio_138 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
}

._buttonGroup_1rwio_148 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  ._header_1rwio_11 {
    padding: 4px 8px;
  }

  ._title_1rwio_57 {
    font-size: 10px;
  }

  ._search_1rwio_80 {
    padding: 6px 8px;
  }

  ._search_1rwio_80 input {
    font-size: 12px;
  }

  ._actions_1rwio_110 {
    padding: 6px 8px;
    gap: 6px;
  }

  ._actionControls_1rwio_132 {
    gap: 6px;
  }

  ._topRow_1rwio_138 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 6px 8px;
  }

  ._buttonGroup_1rwio_148 {
    justify-content: space-between;
  }

  ._searchContainer_1rwio_193 {
    min-width: unset;
  }

  ._filterGrid_1rwio_197 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Legacy search container styles - kept for compatibility */
._searchContainer_1rwio_193 {
  position: relative;
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._searchInputContainer_1rwio_213 {
  position: relative;
  flex: 1;
}

._searchIcon_1rwio_218 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

._searchInput_1rwio_213 {
  flex: 1;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 0;
}

._searchInput_1rwio_213:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-alpha);
}

._searchInput_1rwio_213::placeholder {
  color: var(--text-secondary);
}

._sortContainer_1rwio_250 {
  position: relative;
  display: inline-block;
  z-index: 10000;
}

._sortMenu_1rwio_256 {
  position: fixed;
  width: 260px;
  background: #ffffff !important;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 99999;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  backdrop-filter: none;
  opacity: 1 !important;
}

/* Custom scrollbar for sort menu */
._sortMenu_1rwio_256::-webkit-scrollbar {
  width: 4px;
}

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

._sortMenu_1rwio_256::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

._sortMenu_1rwio_256::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

._sortMenuContent_1rwio_290 {
  padding: 6px;
}

._sortOption_1rwio_294 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  margin: 1px 0;
}

._sortOption_1rwio_294:hover {
  background: var(--bg-hover) !important;
}

._sortOptionActive_1rwio_317 {
  background: var(--primary-alpha) !important;
  color: var(--primary) !important;
  font-weight: 600;
}

._sortOptionActive_1rwio_317::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--primary);
  border-radius: 0 1px 1px 0;
}

._sortOptionIcon_1rwio_335 {
  flex-shrink: 0;
  opacity: 0.6;
}

._sortOptionActive_1rwio_317 ._sortOptionIcon_1rwio_335 {
  opacity: 1;
}

._sortOptionLabel_1rwio_344 {
  flex: 1;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._sortIndicator_1rwio_352 {
  color: var(--primary);
  opacity: 0.9;
  flex-shrink: 0;
}

._resultsRow_1rwio_358 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  margin-top: -4px;
}

._resultsCount_1rwio_366 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  opacity: 0.8;
}

/* Light theme overrides */
:root[data-theme="light"] ._controls_1rwio_1 {
  background: var(--bg-light);
  border-color: var(--border-color);
}

:root[data-theme="light"] ._searchInput_1rwio_213 {
  background: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

:root[data-theme="light"] ._searchInput_1rwio_213::placeholder {
  color: var(--text-secondary);
}

:root[data-theme="light"] ._searchIcon_1rwio_218 {
  color: var(--text-secondary);
}

:root[data-theme="light"] ._sortMenu_1rwio_256 {
  background: #ffffff !important;
  border-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] ._sortMenu_1rwio_256 {
  background: #1a1a1a !important;
  border-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] ._sortOption_1rwio_294 {
  color: var(--text-primary);
}

:root[data-theme="light"] ._sortOption_1rwio_294:hover {
  background: var(--bg-hover);
}

:root[data-theme="light"] ._resultsCount_1rwio_366 {
  color: var(--text-secondary);
}

/* Filter Panel */
._filterPanel_1rwio_418 {
  border-top: 1px solid var(--border-color);
  padding: 20px 16px 16px;
  background: var(--bg-tertiary);
  margin: 8px -16px 0;
  border-radius: 0 0 8px 8px;
}

._filterGrid_1rwio_197 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}

._filterGroup_1rwio_433 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._filterLabel_1rwio_439 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

._filterIcon_1rwio_449 {
  color: var(--text-tertiary);
  opacity: 0.8;
}

._filterSelect_1rwio_454,
._filterInput_1rwio_455 {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

._filterSelect_1rwio_454 {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-size: 16px;
  background-position: right 8px center;
  background-repeat: no-repeat;
  padding-right: 32px;
}

._filterSelect_1rwio_454:focus,
._filterInput_1rwio_455:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-alpha);
}

._filterInput_1rwio_455::placeholder {
  color: var(--text-secondary);
}

._tagsFilterContainer_1rwio_488 {
  position: relative;
  width: 100%;
}

/* Light theme filter overrides */
:root[data-theme="light"] ._filterPanel_1rwio_418 {
  background: var(--bg-lighter);
  border-color: var(--border-color);
}

:root[data-theme="light"] ._filterLabel_1rwio_439 {
  color: var(--text-primary);
}

:root[data-theme="light"] ._filterIcon_1rwio_449 {
  color: var(--text-tertiary);
}

:root[data-theme="light"] ._filterSelect_1rwio_454,
:root[data-theme="light"] ._filterInput_1rwio_455 {
  background: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

:root[data-theme="light"] ._filterInput_1rwio_455::placeholder {
  color: var(--text-secondary);
}
/* Enhanced Block Explorer - Modern 2025 UX */

.enhanced-block-explorer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.95) 0%, rgba(30, 30, 46, 0.95) 100%);
  border-radius: 16px;
  overflow: hidden;
  min-height: 0;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  /* Entrance animation */
  animation: explorerSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes explorerSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated background pattern */
.enhanced-block-explorer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 12s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.enhanced-block-explorer > * {
  position: relative;
  z-index: 1;
}

.enhanced-block-explorer.compact {
  border-radius: 0.25rem;
}

/* Enhanced Header */
.explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px);
  position: relative;
  /* Staggered entrance animation */
  animation: headerSlideIn 0.5s ease-out 0.2s both;
}

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

/* Header shimmer effect */
.explorer-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: headerShimmer 4s ease-in-out infinite;
}

@keyframes headerShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.header-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
}

.header-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary, #f8f8f2), #cdd6f4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.1); }
}

.enhanced-block-explorer .block-count {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

.header-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* Old button styles removed - now using Button component */

/* Search */
.explorer-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.explorer-search svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.explorer-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  outline: none;
}

.explorer-search input::placeholder {
  color: var(--text-tertiary);
}

/* Controls */
.explorer-controls {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.control-btn.active {
  background: var(--accent-color);
  color: white;
}

/* Content */
.explorer-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex scrolling */
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--text-primary, #f8f8f2);
  font-weight: 500;
  flex: 1;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--accent-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
  flex: 1;
}

.empty-state svg {
  color: var(--text-tertiary);
  margin-bottom: 1rem;
}

.empty-state h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.empty-state p {
  margin: 0 0 1.5rem 0;
  font-size: 0.875rem;
}

/* Old create-first-btn styles removed - now using Button component */

/* Blocks View */
.blocks-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  min-height: 0; /* Important for flex scrolling */
  max-height: calc(100vh - 200px); /* Leave space for header and controls */
}

/* List View - Enhanced specific */
.enhanced-block-explorer .blocks-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Grid View - Enhanced specific */
.enhanced-block-explorer .blocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  padding: 0.25rem;
}

/* Tree View */
.blocks-tree {
  display: flex;
  flex-direction: column;
}

/* Enhanced Block Item */
.block-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  backdrop-filter: blur(10px);
  overflow: hidden;
  /* Staggered animation */
  animation: blockItemSlideIn 0.5s ease-out both;
}

.block-item:nth-child(1) { animation-delay: 0.05s; }
.block-item:nth-child(2) { animation-delay: 0.1s; }
.block-item:nth-child(3) { animation-delay: 0.15s; }
.block-item:nth-child(4) { animation-delay: 0.2s; }
.block-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes blockItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.block-item:hover {
  background: rgba(255, 123, 0, 0.08);
  border-color: var(--primary, #ff7b00);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 20px rgba(255, 123, 0, 0.15);
}

.block-item:active {
  transform: translateY(0) scale(0.99);
}

/* Block item shimmer effect */
.block-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.block-item:hover::before {
  left: 100%;
}

.block-item.selected {
  background: var(--accent-color-alpha);
  border-color: var(--accent-color);
}

.block-item[draggable="true"] {
  cursor: grab;
}

.block-item[draggable="true"]:active {
  cursor: grabbing;
}

/* Block Icon */
.block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: var(--accent-color-alpha);
  color: var(--accent-color);
  flex-shrink: 0;
}

.blocks-grid .block-icon {
  width: 3rem;
  height: 3rem;
}

/* Block Info */
.block-info {
  flex: 1;
  min-width: 0;
}

.block-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.favorite-icon {
  color: var(--warning-color);
}

.block-description {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
}

.block-type {
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

.block-tags {
  display: flex;
  gap: 0.25rem;
}

.block-tag {
  background: var(--accent-color-alpha);
  color: var(--accent-color);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
}

.block-tag-more {
  color: var(--text-tertiary);
  font-size: 0.625rem;
}

/* Block Actions */
.block-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.block-item:hover .block-actions {
  opacity: 1;
}

.block-actions .action-btn {
  width: 1.75rem;
  height: 1.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .enhanced-block-explorer {
    border-radius: 0;
  }
  
  .explorer-header {
    padding: 0.75rem;
  }
  
  .explorer-search {
    padding: 0.5rem 0.75rem;
  }
  
  .explorer-controls {
    padding: 0.5rem 0.75rem;
  }
  
  .enhanced-block-explorer .blocks-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
  }

  .enhanced-block-explorer .block-item {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .enhanced-block-explorer .block-icon {
    width: 2rem;
    height: 2rem;
  }
}

/* Tree View Styles */
.blocks-tree {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  min-height: 0; /* Important for flex scrolling */
  max-height: calc(100vh - 250px); /* Ensure it doesn't exceed available space */
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.blocks-tree::-webkit-scrollbar {
  width: 6px;
}

.blocks-tree::-webkit-scrollbar-track {
  background: transparent;
}

.blocks-tree::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 3px;
}

.blocks-tree::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-secondary);
}

.tree-node {
  display: flex;
  flex-direction: column;
}

.tree-node-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  margin: 2px 4px;
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: blockNodeSlideIn 0.5s ease-out both;
}

.tree-node-content:nth-child(1) { animation-delay: 0.05s; }
.tree-node-content:nth-child(2) { animation-delay: 0.1s; }
.tree-node-content:nth-child(3) { animation-delay: 0.15s; }
.tree-node-content:nth-child(4) { animation-delay: 0.2s; }
.tree-node-content:nth-child(5) { animation-delay: 0.25s; }

@keyframes blockNodeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.tree-node-content:hover {
  background: rgba(255, 123, 0, 0.08);
  border-color: var(--primary, #ff7b00);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 20px rgba(255, 123, 0, 0.15);
}

.tree-node-content:active {
  transform: translateY(0) scale(0.99);
}

/* Block node shimmer effect */
.tree-node-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.tree-node-content:hover::before {
  left: 100%;
}

.tree-node-content.block-instance-node:hover {
  background: rgba(255, 123, 0, 0.1);
  border-color: var(--primary, #ff7b00);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(255, 123, 0, 0.2);
}

.tree-node-content.selected {
  background: rgba(78, 205, 196, 0.15);
  border-color: rgba(78, 205, 196, 0.8);
  box-shadow:
    0 4px 15px rgba(78, 205, 196, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px) scale(1.01);
}

.tree-node-content.has-children {
  font-weight: 500;
}

.block-type-node {
  background:
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  border: 1px solid rgba(78, 205, 196, 0.3);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(78, 205, 196, 0.1);
}

.block-type-node:hover {
  background:
    linear-gradient(135deg, rgba(255, 123, 0, 0.15) 0%, rgba(255, 123, 0, 0.15) 100%);
  border-color: var(--primary, #ff7b00);
  box-shadow: 0 4px 15px rgba(255, 123, 0, 0.2);
}

.block-instance-node {
  background: var(--bg-primary);
  cursor: grab;
  user-select: none;
}

.taxonomy-node {
  background: var(--bg-secondary);
  border: 1px solid transparent;
  font-weight: 600;
  color: var(--accent-color);
  opacity: 0.9;
}

.taxonomy-node:hover {
  background: var(--accent-color-alpha);
  border-color: var(--accent-color);
  opacity: 1;
}

.tree-node-content[class*="blocktype-"] {
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  font-weight: 600;
  color: var(--success-color);
  opacity: 0.9;
}

.tree-node-content[class*="blocktype-"]:hover {
  background: var(--success-color-alpha);
  border-color: var(--success-color);
  opacity: 1;
}

.action-btn.create-btn {
  background: var(--success-color);
  color: white;
  border: none;
}

.action-btn.create-btn:hover {
  background: var(--success-color-dark);
}

.block-instance-node[draggable="true"]:hover {
  cursor: grab;
}

.block-instance-node[draggable="true"]:active {
  cursor: grabbing;
}

.tree-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tree-expand-btn:hover {
  background: var(--accent-bg);
  color: var(--accent-primary);
  transform: scale(1.1);
}

.tree-expand-btn:active {
  transform: scale(0.95);
}

.tree-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.tree-node-info {
  flex: 1;
  min-width: 0;
}

.tree-node-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}

.block-type-name {
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary, #f8f8f2), #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 16px;
  animation: blockTypeGlow 3s ease-in-out infinite alternate;
}

@keyframes blockTypeGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.1); }
}

.tree-node-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.5;
  opacity: 0.9;
}

.tree-node-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
  flex-wrap: wrap;
}

.metadata-item {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.metadata-separator {
  color: var(--text-tertiary);
  opacity: 0.5;
}

.tree-node-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tree-node-content:hover .tree-node-actions {
  opacity: 1;
}

.tree-children {
  margin-left: 1.5rem;
  border-left: 1px solid var(--border-color);
  padding-left: 0.5rem;
  margin-top: 0.25rem;
}

.tree-children .tree-node {
  margin-bottom: 0.25rem;
}

/* Flat View Styles */
.blocks-flat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-color);
  border-radius: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0; /* Important for flex scrolling */
  max-height: calc(100vh - 250px); /* Ensure it doesn't exceed available space */
  padding: 0.5rem;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.blocks-flat::-webkit-scrollbar {
  width: 6px;
}

.blocks-flat::-webkit-scrollbar-track {
  background: transparent;
}

.blocks-flat::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 3px;
}

.blocks-flat::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-secondary);
}

.flat-block-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 12px;
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-height: 72px;
  position: relative;
  overflow: hidden;
}

.flat-block-item:hover {
  background: var(--bg-secondary);
}

.flat-block-item.selected {
  background: var(--accent-color-alpha);
  border-left: 3px solid var(--accent-color);
}

.flat-block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}

/* Removed duplicate - see line 704 for actual definition */

.flat-block-type {
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.flat-block-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  align-items: flex-start;
  margin-top: 4px;
}

.flat-block-item:hover .flat-block-actions {
  opacity: 1;
}

.flat-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.flat-action-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--accent-color);
}

/* Enhanced Metadata Styles */
.favorite-indicator {
  color: var(--warning, #f59e0b);
  margin-left: 0.25rem;
}

.flat-block-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: visible;
  justify-content: center;
}

.flat-block-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.priority-badge, .status-badge {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 500;
  text-transform: uppercase;
}

.priority-badge.high {
  background: var(--warning-alpha, rgba(245, 158, 11, 0.2));
  color: var(--warning, #f59e0b);
}

.status-badge.draft {
  background: var(--info-alpha, rgba(59, 130, 246, 0.2));
  color: var(--info, #3b82f6);
}

.status-badge.template {
  background: var(--primary-alpha, rgba(139, 92, 246, 0.2));
  color: var(--primary, #8b5cf6);
}

.flat-block-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
  overflow: visible;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.block-type {
  font-weight: 500;
  color: var(--text-primary);
}

.block-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.tag {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
}

.tag-more {
  color: var(--text-tertiary);
  font-size: 0.625rem;
}

.block-updated {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.block-usage {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-secondary);
}

.favorite-btn.active {
  color: var(--warning, #f59e0b);
}

/* Responsive Design */
@media (max-width: 768px) {
  .enhanced-block-explorer {
    font-size: 0.875rem;
  }

  .explorer-header {
    padding: 0.75rem;
  }

  .flat-block-item {
    padding: 14px 0.75rem;
    min-height: 68px;
  }

  .tree-node {
    padding: 0.5rem 0.75rem;
  }

  .tree-node-content {
    gap: 0.5rem;
  }

  .tree-node-icon {
    width: 1rem;
    height: 1rem;
  }

  .flat-block-meta {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .block-tags {
    display: none; /* Hide tags on mobile to save space */
  }
}

/* Category View Styles */
.category-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.category-header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.category-selector {
  margin-bottom: 0.75rem;
}

.category-pills {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.category-pill {
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.category-pill.active {
  background: var(--category-color, var(--primary, #007bff));
  color: white;
  border-color: var(--category-color, var(--primary, #007bff));
}

.category-pill:hover:not(.active) {
  background: rgba(255, 123, 0, 0.1);
  border-color: var(--primary, #ff7b00);
}

.content-type-filters {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.content-type-pill {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.content-type-pill.active {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.content-type-pill:hover:not(.active) {
  background: var(--bg-hover);
}

.category-content-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

.content-item {
  background:
    linear-gradient(135deg, rgba(49, 50, 68, 0.95) 0%, rgba(42, 42, 58, 0.95) 100%);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  overflow: hidden;
  /* Staggered animation */
  animation: contentItemSlideIn 0.5s ease-out both;
}

.content-item:nth-child(1) { animation-delay: 0.05s; }
.content-item:nth-child(2) { animation-delay: 0.1s; }
.content-item:nth-child(3) { animation-delay: 0.15s; }
.content-item:nth-child(4) { animation-delay: 0.2s; }
.content-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes contentItemSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Content item background pattern */
.content-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: contentBackgroundShift 8s ease-in-out infinite;
}

@keyframes contentBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.content-item > * {
  position: relative;
  z-index: 1;
}

/* Content type accent borders */
.content-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--content-color, var(--primary, #007bff));
  border-radius: 0 4px 4px 0;
}

.content-item:hover {
  background:
    linear-gradient(135deg, rgba(255, 123, 0, 0.08) 0%, rgba(255, 123, 0, 0.05) 100%);
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 12px 30px rgba(255, 123, 0, 0.15),
    0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: rgba(78, 205, 196, 0.3);
}

.content-item.selected {
  background:
    linear-gradient(135deg, rgba(78, 205, 196, 0.15) 0%, rgba(0, 120, 212, 0.15) 100%);
  border-color: rgba(78, 205, 196, 0.6);
  box-shadow:
    0 8px 25px rgba(78, 205, 196, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-2px) scale(1.01);
}

.content-item.selected::after {
  background: linear-gradient(180deg, var(--content-color, var(--primary, #007bff)), var(--primary-alpha, rgba(0, 123, 255, 0.8)));
  width: 6px;
}

/* Drag functionality for category view items */
.content-item[draggable="true"] {
  cursor: grab;
}

.content-item[draggable="true"]:active {
  cursor: grabbing;
}

.content-item:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.content-item.joke {
  --content-color: var(--primary, #007bff);
}

.content-item.bit {
  --content-color: var(--primary, #007bff);
}

.content-item.set {
  --content-color: var(--info, #06b6d4);
}

.content-item.track {
  --content-color: var(--primary, #8b5cf6);
}

.content-item.episode {
  --content-color: var(--success, #10b981);
}

.content-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.375rem;
  width: 100%;
}

.content-info {
  flex: 1;
}

.content-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}

.content-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.9;
  line-height: 1.3;
}

.content-badges {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

.version-badge {
  background: var(--primary-alpha, rgba(139, 92, 246, 0.2));
  color: var(--primary, #8b5cf6);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--primary-alpha, rgba(139, 92, 246, 0.3));
}

.performance-badge {
  background: var(--success-alpha, rgba(16, 185, 129, 0.2));
  color: var(--success, #10b981);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--success-alpha, rgba(16, 185, 129, 0.3));
}

.content-tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.content-tag {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
}

/* Additional Mobile Responsive */
@media (max-width: 768px) {
  .explorer-header {
    padding: 0.375rem 0.5rem;
  }

  .header-title h3 {
    font-size: 0.75rem;
  }

  .header-actions {
    gap: 0.25rem;
  }

  .category-header {
    padding: 0.5rem;
  }

  .category-pills {
    gap: 0.25rem;
  }

  .category-pill {
    padding: 0.125rem 0.375rem;
    font-size: 0.65rem;
  }

  .content-item {
    padding: 0.5rem;
  }

  .content-type-pill {
    padding: 0.125rem 0.25rem;
    font-size: 0.65rem;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .enhanced-block-explorer,
  .explorer-header,
  .block-item,
  .tree-node,
  .category-pill,
  .content-item {
    animation: none !important;
    transition: none !important;
  }

  .enhanced-block-explorer::before,
  .explorer-header::before,
  .block-item::before {
    animation: none !important;
  }

  .block-item:hover,
  .tree-node:hover,
  .content-item:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .enhanced-block-explorer {
    border-width: 2px;
    border-color: var(--text-primary, #ffffff);
  }

  .block-item,
  .tree-node {
    border-width: 2px;
  }

  .block-item:hover,
  .tree-node:hover {
    border-color: var(--text-primary, #ffffff);
    background: var(--bg-surface-3, rgba(255, 255, 255, 0.2));
  }
}

/* Focus styles for keyboard navigation */
.block-item:focus-visible,
.tree-node:focus-visible,
.category-pill:focus-visible,
.content-item:focus-visible {
  outline: 2px solid var(--primary, #007bff);
  outline-offset: 2px;
}

/* Enhanced light theme adjustments */
[data-theme="light"] .enhanced-block-explorer {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .enhanced-block-explorer::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .explorer-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

[data-theme="light"] .explorer-header .title,
[data-theme="light"] .explorer-header h3,
[data-theme="light"] .explorer-header h2 {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

[data-theme="light"] .explorer-header .icon {
  color: var(--primary, #ff7b00) !important;
}

[data-theme="light"] .block-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .block-item:hover {
  background: rgba(255, 123, 0, 0.08);
  border-color: var(--primary, #ff7b00);
  box-shadow: 0 6px 20px rgba(255, 123, 0, 0.15);
}

/* Light mode tree expand button */
[data-theme="light"] .tree-expand-btn {
  color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .tree-expand-btn:hover {
  background: rgba(255, 123, 0, 0.1);
  color: var(--primary, #ff7b00);
}

/* Light mode tree node content */
[data-theme="light"] .tree-node-content {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

[data-theme="light"] .tree-node-content:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--primary, #ff7b00);
  box-shadow: 0 4px 12px rgba(255, 123, 0, 0.15);
}

[data-theme="light"] .tree-node-title {
  color: #1a1a1a;
}

[data-theme="light"] .tree-node-meta {
  color: #6b7280;
}

/* Light mode tree children */
[data-theme="light"] .tree-children {
  border-left-color: rgba(0, 0, 0, 0.15);
}

/* Light mode flat view */
[data-theme="light"] .flat-block-item {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

[data-theme="light"] .flat-block-item:hover {
  background: rgba(255, 123, 0, 0.08);
  border-color: var(--primary, #ff7b00);
  box-shadow: 0 4px 12px rgba(255, 123, 0, 0.15);
}

[data-theme="light"] .flat-block-item.selected {
  background: rgba(255, 123, 0, 0.1);
  border-color: var(--primary, #ff7b00);
}

[data-theme="light"] .flat-block-title {
  color: #1a1a1a;
}

[data-theme="light"] .flat-block-meta {
  color: #6b7280;
}

[data-theme="light"] .flat-block-description {
  color: #4a5568;
}

/* Light mode category pills */
[data-theme="light"] .category-pill {
  background: rgba(255, 123, 0, 0.1);
  border-color: rgba(255, 123, 0, 0.3);
  color: var(--primary, #ff7b00);
}

[data-theme="light"] .category-pill.active {
  background: var(--primary, #ff7b00);
  color: #ffffff;
  border-color: var(--primary, #ff7b00);
}

[data-theme="light"] .category-pill:hover:not(.active) {
  background: rgba(255, 123, 0, 0.15);
  border-color: var(--primary, #ff7b00);
  color: var(--primary, #ff7b00);
}

/* Light mode content item hover */
[data-theme="light"] .content-item:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: var(--primary, #ff7b00) !important;
  box-shadow: 0 12px 30px rgba(255, 123, 0, 0.15) !important;
}

/* Light mode block type node hover */
[data-theme="light"] .block-type-node:hover {
  background: rgba(255, 123, 0, 0.1) !important;
  border-color: var(--primary, #ff7b00) !important;
  box-shadow: 0 4px 15px rgba(255, 123, 0, 0.2) !important;
}

/* Light mode tree node instance hover */
[data-theme="light"] .tree-node-content.block-instance-node:hover {
  background: rgba(255, 123, 0, 0.1) !important;
  border-color: var(--primary, #ff7b00) !important;
  box-shadow: 0 8px 25px rgba(255, 123, 0, 0.2) !important;
}
/* Enhanced Run History Styles */

.execution-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.execution-metric {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(107, 114, 128, 0.2);
}

.execution-metric.cost {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.2);
}

.execution-warning {
  color: #f59e0b;
  font-size: 0.75rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Enhanced execution item hover effects */
.workflow-execution-item:hover .execution-metric {
  background: rgba(107, 114, 128, 0.15);
}

.workflow-execution-item:hover .execution-metric.cost {
  background: rgba(5, 150, 105, 0.15);
}

/* Run History Dashboard Styles */
.run-history-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.dashboard-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #e5e7eb;
  font-size: 0.875rem;
  font-weight: 500;
}

.dashboard-card-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.dashboard-card-subtitle {
  font-size: 0.75rem;
  color: #9ca3af;
}

.dashboard-card.success .dashboard-card-value {
  color: #10b981;
}

.dashboard-card.cost .dashboard-card-value {
  color: #f59e0b;
}

.dashboard-card.performance .dashboard-card-value {
  color: #3b82f6;
}

/* Enhanced Filters */
.enhanced-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-label {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 500;
}

.filter-input {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #ffffff;
  font-size: 0.875rem;
}

.filter-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Detailed Run Analysis */
.detailed-run-analysis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.analysis-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
}

.analysis-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #e5e7eb;
  font-weight: 500;
}

.node-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  border-left: 3px solid #3b82f6;
}

.timeline-item.failed {
  border-left-color: #ef4444;
}

.timeline-item.completed {
  border-left-color: #10b981;
}

.timeline-node-info {
  flex: 1;
}

.timeline-node-name {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 500;
}

.timeline-node-type {
  font-size: 0.75rem;
  color: #9ca3af;
}

.timeline-duration {
  font-size: 0.75rem;
  color: #6b7280;
  font-family: monospace;
}

/* Performance Metrics */
.performance-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.performance-metric {
  text-align: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
}

.performance-metric-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.performance-metric-label {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Cost Breakdown */
.cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

.cost-service {
  font-size: 0.875rem;
  color: #e5e7eb;
  text-transform: capitalize;
}

.cost-amount {
  font-size: 0.875rem;
  color: #f59e0b;
  font-weight: 500;
  font-family: monospace;
}

/* Run History Workspace */
.run-history-workspace {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Scope Tabs */
.scope-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 16px;
}

.scope-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #9ca3af;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scope-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}

.scope-tab.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #ffffff;
}

.scope-count {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.run-history-workspace.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 400px;
  color: #9ca3af;
}

.run-history-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
  margin-top: 24px;
  flex: 1;
  overflow: hidden;
}

.executions-list {
  min-height: 600px;
  overflow-y: auto;
}

.executions-header {
  margin-bottom: 16px;
}

.executions-header h3 {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.no-executions-notice {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
  color: #f59e0b;
}

.no-executions-notice p {
  margin: 0 0 8px 0;
  font-size: 0.875rem;
}

.no-executions-notice p:last-child {
  margin-bottom: 0;
}

.executions-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.execution-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.execution-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.execution-card.selected {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.execution-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.execution-status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
}

.execution-status-indicator.completed {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.execution-status-indicator.failed,
.execution-status-indicator.error {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.execution-status-indicator.running {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.execution-workflow-name {
  font-weight: 500;
  color: #ffffff;
  flex: 1;
}

.execution-timestamp {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 8px;
}

.filter-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  color: #3b82f6;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-refresh-btn:hover {
  background: rgba(59, 130, 246, 0.2);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .run-history-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .execution-metrics {
    gap: 4px;
  }

  .execution-metric {
    font-size: 0.7rem;
    padding: 1px 4px;
  }

  .detailed-run-analysis {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .run-history-dashboard {
    grid-template-columns: 1fr;
  }

  .enhanced-filters {
    flex-direction: column;
    gap: 8px;
  }

  .run-history-workspace {
    padding: 16px;
  }
}
/* Enhanced Workflow Input Modal - Modern 2025 UX */

.workflow-input-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal, 1000);
  padding: 16px;
  backdrop-filter: blur(20px);
  /* Modern entrance animation */
  animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Performance optimization */
  will-change: opacity, backdrop-filter;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.workflow-input-modal {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-radius: 24px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  position: relative;
  /* Spring physics animation */
  animation: modalSpringIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Performance optimization */
  will-change: transform, opacity;
}

/* Spring physics animation */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Animated background pattern */
.workflow-input-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.workflow-input-modal > * {
  position: relative;
  z-index: 1;
}

.workflow-input-modal.dark {
  background:
    linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%);
  color: #f9fafb;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.workflow-input-modal.dark::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
}

/* Header */
.workflow-input-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.workflow-input-modal.dark .workflow-input-modal-header {
  border-bottom-color: #374151;
}

.workflow-input-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.workflow-input-modal.dark .workflow-input-modal-title {
  color: #f9fafb;
}

.workflow-input-modal-close {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s ease;
}

.workflow-input-modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}

.workflow-input-modal.dark .workflow-input-modal-close {
  color: #9ca3af;
}

.workflow-input-modal.dark .workflow-input-modal-close:hover {
  background: #374151;
  color: #f3f4f6;
}

/* Workflow Info */
.workflow-input-modal-info {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.workflow-input-modal.dark .workflow-input-modal-info {
  border-bottom-color: #374151;
}

.workflow-input-modal-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.workflow-input-modal.dark .workflow-input-modal-info h3 {
  color: #f9fafb;
}

.workflow-input-modal-info p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.workflow-input-modal.dark .workflow-input-modal-info p {
  color: #9ca3af;
}

.workflow-taxonomy-path {
  font-size: 12px;
  color: #8b5cf6;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.workflow-input-modal.dark .workflow-taxonomy-path {
  background: #374151;
  color: #a78bfa;
}

/* Content */
.workflow-input-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.workflow-input-group {
  margin-bottom: 20px;
}

.workflow-input-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.workflow-input-modal.dark .workflow-input-label {
  color: #f3f4f6;
}

.workflow-input-label .required {
  color: #ef4444;
  margin-left: 2px;
}

.workflow-input-description {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.workflow-input-modal.dark .workflow-input-description {
  color: #9ca3af;
}

/* Input Styles */
.workflow-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  color: #111827;
  transition: all 0.2s ease;
  min-height: 44px; /* Touch-friendly */
}

.workflow-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.workflow-input.error {
  border-color: #ef4444;
}

.workflow-input.error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.workflow-input-modal.dark .workflow-input {
  background: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

.workflow-input-modal.dark .workflow-input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

.workflow-input-error {
  display: block;
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
}

/* Checkbox */
.workflow-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}

.workflow-input-modal.dark .workflow-checkbox {
  color: #f3f4f6;
}

.workflow-checkbox input[type="checkbox"] {
  display: none;
}

.workflow-checkbox .checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.workflow-checkbox input[type="checkbox"]:checked + .checkmark {
  background: #8b5cf6;
  border-color: #8b5cf6;
}

.workflow-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.workflow-input-modal.dark .workflow-checkbox .checkmark {
  border-color: #4b5563;
}

/* File and Block Inputs */
.workflow-file-input,
.workflow-block-input {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workflow-file-button,
.workflow-block-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s ease;
  min-height: 44px;
}

.workflow-file-button:hover,
.workflow-block-button:hover {
  background: #e5e7eb;
}

.workflow-input-modal.dark .workflow-file-button,
.workflow-input-modal.dark .workflow-block-button {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.workflow-input-modal.dark .workflow-file-button:hover,
.workflow-input-modal.dark .workflow-block-button:hover {
  background: #4b5563;
}

.workflow-file-name,
.workflow-block-name {
  font-size: 14px;
  color: #6b7280;
  flex: 1;
  truncate: true;
}

.workflow-input-modal.dark .workflow-file-name,
.workflow-input-modal.dark .workflow-block-name {
  color: #9ca3af;
}

/* No Inputs */
.workflow-no-inputs {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.workflow-input-modal.dark .workflow-no-inputs {
  color: #9ca3af;
}

/* Preset Options */
.workflow-preset-options {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.workflow-input-modal.dark .workflow-preset-options {
  border-top-color: #374151;
}

.workflow-preset-name {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.workflow-preset-save {
  background: #8b5cf6;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.workflow-preset-save:hover:not(:disabled) {
  background: #7c3aed;
}

.workflow-preset-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Actions */
.workflow-input-modal-actions {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
}

.workflow-input-modal.dark .workflow-input-modal-actions {
  border-top-color: #374151;
}

.workflow-input-modal-cancel {
  flex: 1;
  padding: 12px 24px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.workflow-input-modal-cancel:hover {
  background: #e5e7eb;
}

.workflow-input-modal.dark .workflow-input-modal-cancel {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.workflow-input-modal.dark .workflow-input-modal-cancel:hover {
  background: #4b5563;
}

.workflow-input-modal-execute {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #8b5cf6;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.workflow-input-modal-execute:hover:not(:disabled) {
  background: #7c3aed;
}

.workflow-input-modal-execute:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .workflow-input-modal-overlay {
    padding: 8px;
  }
  
  .workflow-input-modal {
    max-height: 95vh;
  }
  
  .workflow-input-modal-header,
  .workflow-input-modal-info,
  .workflow-input-modal-content,
  .workflow-input-modal-actions {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .workflow-input-modal-actions {
    flex-direction: column;
  }
  
  .workflow-input-modal-cancel,
  .workflow-input-modal-execute {
    flex: none;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .workflow-input-modal-overlay,
  .workflow-input-modal,
  .workflow-input,
  .workflow-file-button,
  .workflow-block-button,
  .workflow-input-modal-cancel,
  .workflow-input-modal-execute {
    animation: none !important;
    transition: none !important;
  }

  .workflow-input-modal::before {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .workflow-input-modal {
    border-width: 2px;
    border-color: #000000;
  }

  .workflow-input,
  .workflow-file-button,
  .workflow-block-button,
  .workflow-input-modal-cancel,
  .workflow-input-modal-execute {
    border-width: 2px;
  }
}

/* Focus styles for keyboard navigation */
.workflow-input:focus-visible,
.workflow-file-button:focus-visible,
.workflow-block-button:focus-visible,
.workflow-input-modal-cancel:focus-visible,
.workflow-input-modal-execute:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}
/* Enhanced Workflow Explorer - Modern 2025 UX */

.workflow-explorer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.95) 0%, rgba(30, 30, 46, 0.95) 100%);
  color: var(--text-primary);
  overflow: hidden;
  border-radius: 16px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  /* Entrance animation */
  animation: workflowExplorerSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes workflowExplorerSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated background pattern */
.workflow-explorer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(138, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: workflowBackgroundShift 10s ease-in-out infinite;
}

@keyframes workflowBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.workflow-explorer > * {
  position: relative;
  z-index: 1;
}

/* Enhanced Header */
.workflow-explorer-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px);
  min-height: 48px;
  position: relative;
  /* Staggered entrance animation */
  animation: workflowHeaderSlideIn 0.5s ease-out 0.2s both;
}

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

/* Header shimmer effect */
.workflow-explorer-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(138, 92, 246, 0.1), transparent);
  animation: workflowHeaderShimmer 4s ease-in-out infinite;
}

@keyframes workflowHeaderShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.workflow-explorer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-primary, #f8f8f2) !important;
  /* Remove gradient text effect to ensure visibility */
}

/* Ensure text is always visible - force override all gradient effects */
.workflow-explorer-title span,
.workflow-explorer-title * {
  color: var(--text-primary, #f8f8f2) !important;
  -webkit-text-fill-color: var(--text-primary, #f8f8f2) !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

/* Dark theme text visibility */
[data-theme="dark"] .workflow-explorer-title,
[data-theme="dark"] .workflow-explorer-title span,
[data-theme="dark"] .workflow-explorer-title * {
  color: #f8f8f2 !important;
  -webkit-text-fill-color: #f8f8f2 !important;
}

/* Light theme text visibility */
[data-theme="light"] .workflow-explorer-title,
[data-theme="light"] .workflow-explorer-title span,
[data-theme="light"] .workflow-explorer-title * {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}

@keyframes workflowTitleGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.1); }
}

/* Search - File Explorer Style */
.workflow-explorer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
}

.workflow-explorer-search input {
  flex: 1;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid var(--input-border, #464647);
  color: var(--input-text, #cccccc);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.workflow-explorer-search input:focus {
  border-color: var(--primary, #007acc);
}

.workflow-explorer-search input::placeholder {
  color: var(--placeholder-text, #6c6c6c);
}

/* Actions and Controls - Reorganized Layout */
.workflow-explorer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--search-bg, #1e1e1e);
  gap: 8px;
}

.workflow-explorer-actions .view-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.workflow-explorer-actions .view-label {
  font-size: 12px;
  color: var(--text-secondary, #a0a0a0);
  font-weight: 500;
}

.workflow-explorer-actions .action-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-explorer-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-status-filter {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}



/* Tree */
.workflow-explorer-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.workflow-tree-node {
  user-select: none;
}

/* Enhanced drag cursor for workflow items */
.workflow-tree-item[draggable] {
  cursor: grab;
  user-select: none;
}

.workflow-tree-item[draggable]:active {
  cursor: grabbing;
}

/* Ensure drag cursor is visible on content areas */
.workflow-tree-item[draggable] .workflow-tree-content {
  cursor: grab;
  pointer-events: auto;
}

.workflow-tree-item[draggable] .workflow-tree-icon {
  cursor: grab;
  pointer-events: auto;
}

/* Prevent action buttons from interfering with drag */
.workflow-tree-actions {
  pointer-events: auto;
}

.workflow-tree-action {
  cursor: pointer !important;
  pointer-events: auto;
}

.workflow-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  margin: 2px 6px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: workflowItemSlideIn 0.5s ease-out both;
}

.workflow-tree-item:nth-child(1) { animation-delay: 0.05s; }
.workflow-tree-item:nth-child(2) { animation-delay: 0.1s; }
.workflow-tree-item:nth-child(3) { animation-delay: 0.15s; }
.workflow-tree-item:nth-child(4) { animation-delay: 0.2s; }
.workflow-tree-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes workflowItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.workflow-tree-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(138, 92, 246, 0.4);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.workflow-tree-item:active {
  transform: translateY(0) scale(0.99);
}

/* Workflow item shimmer effect */
.workflow-tree-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.workflow-tree-item:hover::before {
  left: 100%;
}

.workflow-tree-item.selected {
  background: var(--accent-primary-alpha);
  color: var(--accent-primary);
}

.workflow-tree-item.category {
  font-weight: 700;
  color: var(--text-primary);
  background:
    linear-gradient(135deg, rgba(138, 92, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  margin: 6px 4px;
  border-radius: 12px;
  border: 1px solid rgba(138, 92, 246, 0.2);
  box-shadow: 0 2px 8px rgba(138, 92, 246, 0.1);
}

.workflow-tree-item.category:hover {
  background:
    linear-gradient(135deg, rgba(138, 92, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
  border-color: rgba(138, 92, 246, 0.4);
  box-shadow: 0 4px 15px rgba(138, 92, 246, 0.2);
}

.workflow-tree-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.workflow-tree-chevron:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(138, 92, 246, 0.3);
  color: var(--text-primary);
  transform: scale(1.1);
}

.workflow-tree-chevron:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.workflow-tree-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.workflow-tree-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  line-height: 1.4;
}

.workflow-tree-count {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.workflow-tree-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.workflow-tree-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workflow-tree-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.workflow-tree-meta span {
  white-space: nowrap;
}

.workflow-last-run {
  color: var(--text-tertiary);
}

.workflow-success-rate {
  color: var(--success-color, #22c55e);
  font-weight: 500;
}

.workflow-run-count {
  color: var(--text-secondary);
}

.workflow-tree-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.workflow-tree-item:hover .workflow-tree-actions {
  opacity: 1;
}

.workflow-tree-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.workflow-tree-action:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Category run button styling */
.category-run-button {
  color: var(--accent-color) !important;
  opacity: 1 !important; /* Always visible for category buttons */
}

.category-run-button:hover {
  background: var(--accent-color) !important;
  color: white !important;
}

/* Make category run button container always visible */
.workflow-tree-item.category .workflow-tree-actions {
  opacity: 1 !important;
}

/* Make workflow run button container always visible */
.workflow-tree-item.workflow .workflow-tree-actions {
  opacity: 1 !important;
}

/* Make workflow run buttons more visible */
.workflow-tree-item.workflow .workflow-tree-action {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--accent-color) !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.workflow-tree-item.workflow .workflow-tree-action:hover {
  background: var(--accent-color) !important;
  color: white !important;
}

/* Ensure icons are visible in workflow buttons */
.workflow-tree-item.workflow .workflow-tree-action svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}



.workflow-tree-children {
  margin-left: 8px;
}

/* Status indicators */
.status-active {
  color: var(--success-color, #22c55e);
}

.status-paused {
  color: var(--warning-color, #f59e0b);
}

.status-draft {
  color: var(--text-secondary);
}

.status-error {
  color: var(--error-color, #ef4444);
}

/* Loading and empty states */
.workflow-explorer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
  font-weight: 500;
}

.workflow-explorer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.workflow-explorer-empty svg {
  margin-bottom: 16px;
  color: var(--text-tertiary);
}

.workflow-explorer-empty p {
  margin: 0 0 16px 0;
  font-size: 14px;
}

.workflow-explorer-create-first {
  background: var(--accent-primary, var(--primary, #3b82f6));
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.workflow-explorer-create-first:hover {
  background: var(--accent-primary-hover, var(--primary-hover, #2563eb));
  transform: translateY(-1px);
}

/* Light theme specific button styling */
[data-theme="light"] .workflow-explorer-create-first {
  background: var(--primary, #3b82f6);
  color: white;
}

[data-theme="light"] .workflow-explorer-create-first:hover {
  background: var(--primary-hover, #2563eb);
}

/* Responsive design */
@media (max-width: 768px) {
  .workflow-explorer-header {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .workflow-explorer-search {
    order: 1;
  }

  .workflow-explorer-filters {
    order: 2;
    justify-content: space-between;
  }

  .workflow-tree-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .workflow-explorer {
  background: var(--bg-darkest);
}

[data-theme="dark"] .workflow-explorer-header {
  background: var(--bg-darker);
  border-bottom-color: var(--border-color-dark);
}

[data-theme="dark"] .workflow-tree-item.category {
  background: var(--bg-darker);
}

/* Light theme adjustments */
[data-theme="light"] .workflow-explorer {
  background: var(--bg-lightest);
}

[data-theme="light"] .workflow-explorer-header {
  background: var(--bg-lighter);
  border-bottom-color: var(--border-color-light);
}

[data-theme="light"] .workflow-tree-item.category {
  background: var(--bg-lighter);
}

/* View Mode Tabs */
.workflow-explorer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.workflow-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.workflow-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.workflow-tab.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  background: var(--bg-primary);
}

/* Content Container */
.workflow-explorer-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* List View */
.workflow-explorer-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.workflow-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(49, 50, 68, 0.95) 0%, rgba(42, 42, 58, 0.95) 100%);
  margin-bottom: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: workflowListSlideIn 0.5s ease-out both;
}

.workflow-list-item:nth-child(1) { animation-delay: 0.05s; }
.workflow-list-item:nth-child(2) { animation-delay: 0.1s; }
.workflow-list-item:nth-child(3) { animation-delay: 0.15s; }
.workflow-list-item:nth-child(4) { animation-delay: 0.2s; }
.workflow-list-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes workflowListSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Workflow list background pattern */
.workflow-list-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(138, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: workflowListBackgroundShift 8s ease-in-out infinite;
}

@keyframes workflowListBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.workflow-list-item > * {
  position: relative;
  z-index: 1;
}

.workflow-list-item:hover {
  background:
    linear-gradient(135deg, rgba(49, 50, 68, 0.98) 0%, rgba(42, 42, 58, 0.98) 100%);
  border-color: rgba(138, 92, 246, 0.4);
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.2),
    0 4px 15px rgba(0, 0, 0, 0.1);
}

.workflow-list-item:active {
  transform: translateY(-2px) scale(0.99);
}

.workflow-list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(138, 92, 246, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
  color: var(--accent-color, #a78bfa);
  flex-shrink: 0;
  border: 1px solid rgba(138, 92, 246, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow-list-item:hover .workflow-list-icon {
  transform: scale(1.1) rotate(5deg);
  background:
    linear-gradient(135deg, rgba(138, 92, 246, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%);
  border-color: rgba(138, 92, 246, 0.5);
  box-shadow: 0 4px 15px rgba(138, 92, 246, 0.2);
}

.workflow-list-content {
  flex: 1;
  min-width: 0;
}

.workflow-list-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.workflow-list-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-list-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.workflow-updated {
  color: var(--text-tertiary);
}

.workflow-list-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.workflow-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.workflow-action-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.workflow-action-button.executing {
  background: var(--warning-color-light);
  color: var(--warning-color);
  border-color: var(--warning-color);
  cursor: not-allowed;
}

/* History View */
.workflow-explorer-history {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.workflow-execution-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(49, 50, 68, 0.95) 0%, rgba(42, 42, 58, 0.95) 100%);
  margin-bottom: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: workflowExecutionSlideIn 0.5s ease-out both;
}

.workflow-execution-item:nth-child(1) { animation-delay: 0.05s; }
.workflow-execution-item:nth-child(2) { animation-delay: 0.1s; }
.workflow-execution-item:nth-child(3) { animation-delay: 0.15s; }
.workflow-execution-item:nth-child(4) { animation-delay: 0.2s; }
.workflow-execution-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes workflowExecutionSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Workflow execution background pattern */
.workflow-execution-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: workflowExecutionBackgroundShift 6s ease-in-out infinite;
}

@keyframes workflowExecutionBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.workflow-execution-item > * {
  position: relative;
  z-index: 1;
}

.workflow-execution-item:hover {
  background:
    linear-gradient(135deg, rgba(49, 50, 68, 0.98) 0%, rgba(42, 42, 58, 0.98) 100%);
  border-color: rgba(16, 185, 129, 0.4);
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.1);
}

.workflow-execution-item:active {
  transform: translateY(-1px) scale(0.99);
}

.execution-status {
  flex-shrink: 0;
}

.execution-status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Status indicator glow effect */
.execution-status-indicator::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: inherit;
  z-index: -1;
  animation: statusGlow 2s ease-in-out infinite alternate;
}

@keyframes statusGlow {
  from { opacity: 0.5; }
  to { opacity: 0.8; }
}

.execution-status-indicator.running {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
  color: var(--warning-color, #f59e0b);
  border-color: rgba(245, 158, 11, 0.4);
  animation: runningPulse 2s ease-in-out infinite;
}

@keyframes runningPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.execution-status-indicator.completed {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(34, 197, 94, 0.2) 100%);
  color: var(--success-color, #10b981);
  border-color: rgba(16, 185, 129, 0.4);
}

.execution-status-indicator.failed,
.execution-status-indicator.cancelled {
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%);
  color: var(--error-color, #ef4444);
  border-color: rgba(239, 68, 68, 0.4);
}

.execution-content {
  flex: 1;
  min-width: 0;
}

.execution-workflow-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}

.execution-timestamp-subtle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  opacity: 0.75;
  font-weight: 400;
}

.execution-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.execution-time {
  color: var(--text-tertiary);
}

.execution-duration {
  padding: 2px 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 11px;
}

.execution-completed {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.execution-error {
  font-size: 12px;
  color: var(--error-color);
  background: var(--error-color-light);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

.execution-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.execution-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.execution-action-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.execution-results-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.execution-results-button:hover {
  background: var(--accent-color-hover, var(--accent-color));
  border-color: var(--accent-color-hover, var(--accent-color));
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.workflow-explorer-empty-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
  .workflow-explorer-header {
    padding: 8px;
    gap: 6px;
  }

  .workflow-explorer-tabs {
    overflow-x: auto;
  }

  .workflow-tab {
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  .workflow-tree-item {
    padding: 8px 6px;
  }

  .workflow-tree-name {
    font-size: 13px;
  }

  .workflow-tree-actions {
    gap: 4px;
  }

  .workflow-tree-action {
    width: 24px;
    height: 24px;
  }

  .workflow-list-item {
    padding: 10px;
    gap: 10px;
  }

  .workflow-list-icon {
    width: 28px;
    height: 28px;
  }

  .workflow-execution-item {
    padding: 10px;
    gap: 10px;
  }
}

/* Execution Details Styles */
.workflow-execution-item.clickable {
  cursor: pointer;
}

.workflow-execution-item.clickable:hover {
  background: var(--bg-hover);
}

.workflow-execution-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  height: 100%;
  overflow-y: auto;
}

.execution-details-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.execution-back-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
  flex-shrink: 0;
}

.execution-back-button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.execution-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.execution-workflow-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.execution-header-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.execution-status-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: capitalize;
}

.execution-status-pill.completed {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.execution-status-pill.failed {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.execution-status-pill.running {
  background: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.execution-status-pill.cancelled {
  background: rgba(107, 114, 128, 0.1);
  color: rgb(107, 114, 128);
  border: 1px solid rgba(107, 114, 128, 0.2);
}

.execution-timestamp {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.execution-quick-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.quick-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.quick-stat svg {
  color: var(--accent-color);
}



.execution-error-section {
  padding: 1rem;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-lg);
}

.execution-error-section h4 {
  margin: 0 0 0.5rem 0;
  color: rgb(239, 68, 68);
}

.execution-error-message {
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
  font-family: monospace;
  font-size: 0.875rem;
  color: rgb(239, 68, 68);
}

.execution-failed-node {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.execution-content-explorers {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.content-explorer-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.content-explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.content-explorer-header:hover {
  background: var(--bg-hover);
}

.content-explorer-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.content-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.chevron {
  transition: transform 0.2s ease;
  color: var(--text-secondary);
}

.chevron.expanded {
  transform: rotate(180deg);
}

.content-explorer-body {
  padding: 1rem;
}

.content-explorer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--text-secondary);
  text-align: center;
}

.content-explorer-empty svg {
  opacity: 0.5;
}

.content-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
}

.content-item.clickable {
  cursor: pointer;
}

.content-item.clickable:hover {
  background: var(--bg-hover);
  border-color: var(--accent-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.content-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.content-item.block .content-item-icon {
  background: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
}

.content-item.asset .content-item-icon {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
}

.content-item.file .content-item-icon {
  background: rgba(168, 85, 247, 0.1);
  color: rgb(168, 85, 247);
}

.content-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.content-item-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.content-item-description {
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-item-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.content-item-source {
  padding: 0.125rem 0.5rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.content-item-time {
  opacity: 0.8;
}

.execution-node-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.execution-node-details h4 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.node-executions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.node-execution {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.node-execution.completed {
  border-color: rgba(34, 197, 94, 0.3);
}

.node-execution.failed {
  border-color: rgba(239, 68, 68, 0.3);
}

.node-execution.running {
  border-color: rgba(59, 130, 246, 0.3);
}

.node-execution-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.node-execution-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.node-execution.completed .node-execution-status {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
}

.node-execution.failed .node-execution-status {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
}

.node-execution.running .node-execution-status {
  background: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
}

.node-execution-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.node-name {
  font-weight: 600;
  color: var(--text-primary);
}

.node-type {
  padding: 0.125rem 0.5rem;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.node-duration {
  color: var(--text-secondary);
}

.node-execution-error {
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: rgb(239, 68, 68);
  font-family: monospace;
}

.execution-data-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.execution-data-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.execution-data-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.execution-data-header h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.execution-data-content {
  padding: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-size: 0.825rem;
  color: var(--text-primary);
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.5;
}

.execution-data-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.execution-data-content::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.execution-data-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.execution-data-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

@media (max-width: 768px) {
  .execution-data-section {
    grid-template-columns: 1fr;
  }

  .execution-summary {
    grid-template-columns: 1fr;
  }

  .execution-details-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .workflow-explorer,
  .workflow-explorer-header,
  .workflow-tree-item,
  .workflow-list-item,
  .workflow-execution-item {
    animation: none !important;
    transition: none !important;
  }

  .workflow-explorer::before,
  .workflow-explorer-header::before,
  .workflow-tree-item::before {
    animation: none !important;
  }

  .workflow-tree-item:hover,
  .workflow-list-item:hover,
  .workflow-execution-item:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .workflow-explorer {
    border-width: 2px;
    border-color: #ffffff;
  }

  .workflow-tree-item,
  .workflow-list-item {
    border-width: 2px;
  }

  .workflow-tree-item:hover,
  .workflow-list-item:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Focus styles for keyboard navigation */
.workflow-tree-item:focus-visible,
.workflow-list-item:focus-visible,
.workflow-execution-item:focus-visible,
.workflow-action-button:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

/* Enhanced light theme adjustments */
[data-theme="light"] .workflow-explorer {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .workflow-explorer::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(138, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .workflow-explorer-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

[data-theme="light"] .workflow-explorer-header .title,
[data-theme="light"] .workflow-explorer-header h3,
[data-theme="light"] .workflow-explorer-header h2 {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

[data-theme="light"] .workflow-explorer-header .icon {
  color: var(--primary, #ff7b00) !important;
}

[data-theme="light"] .workflow-tree-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .workflow-explorer-empty {
  color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .workflow-explorer-empty svg {
  color: var(--text-tertiary, #9ca3af);
}

[data-theme="light"] .workflow-explorer-empty p {
  color: var(--text-primary, #1f2937);
}

[data-theme="light"] .workflow-tree-item:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(138, 92, 246, 0.4);
}
/* Block Type Creation Modal Styles */

.block-type-creation-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.block-type-creation-modal {
  background: var(--bg-darkest);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.block-type-creation-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
}

.block-type-creation-modal-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Content */
.block-type-creation-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Basic Info Section */
.basic-info-section h3,
.fields-section h3 {
  margin: 0 0 16px 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
}

.form-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.form-row .flex-1 {
  flex: 1;
}

.form-row .icon-group {
  flex-shrink: 0;
  min-width: 80px;
}

.form-row .form-group {
  margin-bottom: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  min-height: 1.05rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--bg-secondary, #333333);
  border: 1px solid var(--border-color, #666666);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-primary, #ffffff);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.form-group select {
  background: var(--bg-secondary, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-group select option {
  background: var(--bg-secondary, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
  padding: 8px 12px;
  border: none;
}

/* Ensure dropdown options are visible in all browsers */
.form-group select::-webkit-scrollbar {
  width: 8px;
}

.form-group select::-webkit-scrollbar-track {
  background: var(--bg-secondary, #333333);
}

.form-group select::-webkit-scrollbar-thumb {
  background: var(--border-color, #666666);
  border-radius: 4px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-color, #007bff);
  box-shadow: 0 0 0 3px var(--accent-color-alpha, rgba(0, 123, 255, 0.25));
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.error-message {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 4px;
  display: block;
}

/* Icon Picker */
.icon-picker {
  position: relative;
}

.icon-picker-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  min-width: 50px;
  justify-content: center;
}

.icon-picker-trigger:hover {
  border-color: var(--accent-color);
}

.icon-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  min-width: 200px;
}

.icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: none;
  border: 1px solid transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
  aspect-ratio: 1;
  min-height: 32px;
}

.icon-option:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.icon-option.selected {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

/* Fields Section */
.fields-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.add-field-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.add-field-btn:hover {
  background: var(--accent-color-hover);
}

.no-fields {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px dashed var(--border-color);
}

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

/* Field Editor */
.field-editor {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.field-number {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
}

.remove-field-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.remove-field-btn:hover {
  background: var(--bg-tertiary);
  color: var(--error-color);
}

.field-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-options {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent-color);
}

/* Name Entry Step */
.name-entry-section {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.back-button-section {
  display: flex;
  align-items: center;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.selected-type-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.selected-type-icon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color-alpha);
  border-radius: 8px;
}

.selected-type-details h3 {
  margin: 0 0 4px 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

.selected-type-details p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.name-input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.name-input-section label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.name-input-section input {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 16px;
  transition: border-color 0.2s ease;
}

.name-input-section input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-color-alpha);
}

.name-input-section input::placeholder {
  color: var(--text-tertiary);
}

/* Footer */
.block-type-creation-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-darker);
}

.cancel-btn {
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.create-btn {
  padding: 8px 16px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.create-btn:hover:not(:disabled) {
  background: var(--accent-color-hover);
}

.create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  .block-type-creation-modal {
    max-width: 100%;
    margin: 0;
    height: 100vh;
    border-radius: 0;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .field-options {
    flex-direction: column;
    gap: 8px;
  }

  .block-types-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 4px;
  }

  .block-type-card {
    padding: 24px;
  }

  .card-content {
    gap: 16px;
  }

  .category-btn {
    padding: 8px 16px;
  }
}

/* Taxonomy Modal Specific Styles */
.search-section {
  margin-bottom: 24px;
}

.search-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.category-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.category-btn {
  padding: 10px 24px;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-btn:hover {
  background: var(--bg-lighter);
  border-color: var(--primary);
  color: var(--text-primary);
}

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

.grid-container {
  overflow-y: auto;
  max-height: 400px;
}

.block-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
  padding: 8px;
}

.block-type-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 28px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.block-type-card:hover {
  border-color: var(--primary);
  background: var(--bg-lighter);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.block-type-card.create-new {
  border-style: dashed;
  border-color: var(--border-color);
}

.block-type-card.create-new:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.card-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.card-icon {
  color: var(--primary);
  flex-shrink: 0;
}

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

.card-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.card-description {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.card-category {
  display: inline-block;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-secondary);
  text-align: center;
}

.empty-text {
  margin-bottom: 16px;
  font-style: italic;
}

.refresh-btn {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.refresh-btn:hover {
  background: var(--primary-hover);
}
/* Enhanced Workflow Creation Modal - Modern 2025 UX */

.workflow-creation-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(20px);
  /* Modern entrance animation */
  animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Performance optimization */
  will-change: opacity, backdrop-filter;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.workflow-creation-modal {
  background:
    linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(35, 39, 47, 0.95) 100%);
  border-radius: 24px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 90vw;
  max-width: 940px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  position: relative;
  /* Spring physics animation */
  animation: modalSpringIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Performance optimization */
  will-change: transform, opacity;
}

/* Spring physics animation */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Animated background pattern */
.workflow-creation-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.workflow-creation-modal > * {
  position: relative;
  z-index: 1;
}

.workflow-creation-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #313244;
  background: #181825;
}

.workflow-creation-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #f8f8f2;
}

.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.workflow-creation-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.workflow-creation-section {
  margin-bottom: 32px;
}

.workflow-creation-section:last-child {
  margin-bottom: 0;
}

.workflow-creation-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Template Grid */
.workflow-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.workflow-template-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface-1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.workflow-template-card:hover {
  border-color: var(--accent-color);
  background: var(--bg-surface-2);
}

.workflow-template-card.selected {
  border-color: var(--accent-color);
  background: var(--accent-color-light);
}

.workflow-template-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent-color);
  color: white;
  flex-shrink: 0;
}

.workflow-template-info {
  flex: 1;
}

.workflow-template-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.workflow-template-info p {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.workflow-template-category {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--border-color);
}

/* Form Fields */
.workflow-details-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.form-input,
.form-textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-color);
}

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

/* Tags Input */
.tags-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--accent-color);
  color: white;
  border-radius: 4px;
  font-size: 12px;
}

.tag button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.tag button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tag-input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.tag-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* Preview */
.workflow-preview {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface-1);
}

.workflow-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.workflow-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--accent-color);
  color: white;
}

.workflow-preview-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.workflow-preview-info p {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.workflow-preview-description {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.workflow-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.preview-tag {
  padding: 2px 6px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border-radius: 3px;
  font-size: 11px;
  border: 1px solid var(--border-color);
}

.workflow-preview-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Footer */
.workflow-creation-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface-1);
}

.cancel-btn,
.create-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cancel-btn:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
}

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

.create-btn:hover:not(:disabled) {
  background: var(--accent-color-hover);
}

.create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Light theme adjustments */
[data-theme="light"] .workflow-creation-modal {
  background: var(--bg-primary);
  border-color: var(--border-color-light);
}

[data-theme="light"] .workflow-creation-modal-header {
  background: var(--bg-surface-1);
  border-color: var(--border-color-light);
}

[data-theme="light"] .workflow-template-card {
  background: var(--bg-surface-1);
  border-color: var(--border-color-light);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .tag-input {
  background: var(--bg-surface-1);
  border-color: var(--border-color-light);
}

[data-theme="light"] .workflow-preview {
  background: #ffffff;
  border-color: #e2e8f0;
}

/* Light theme modal fixes */
[data-theme="light"] .workflow-creation-modal {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .workflow-creation-modal-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .workflow-creation-modal-header h2 {
  color: #1e293b;
}

[data-theme="light"] .workflow-creation-modal-content {
  background: #ffffff;
}

[data-theme="light"] .workflow-creation-modal-footer {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}

/* Modal Title Section */
.modal-title-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-breadcrumb {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Kit Selection */
.kit-selection {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kit-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.kit-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.kit-search:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-color-light);
}

.kit-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.kit-search input::placeholder {
  color: var(--text-tertiary);
}

.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.kit-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-secondary);
  font-size: 14px;
}

.kit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.kit-card:hover {
  border-color: var(--kit-color, var(--accent-color));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.kit-card.coming-soon {
  opacity: 0.6;
  cursor: not-allowed;
}

.kit-card.coming-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-color);
}

.kit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.kit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--kit-color, var(--accent-color));
  background: linear-gradient(135deg, var(--kit-color, var(--accent-color)), var(--kit-color, var(--accent-color))88);
  border-radius: 12px;
  color: white;
  font-size: 24px;
}

.coming-soon-badge {
  padding: 4px 8px;
  background: var(--warning-color-light);
  color: var(--warning-color);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kit-content {
  flex: 1;
  margin-bottom: 16px;
}

.kit-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.kit-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.kit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kit-category {
  padding: 4px 10px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.kit-templates {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.kit-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--text-tertiary);
  transition: all 0.2s ease;
}

.kit-card:hover .kit-arrow {
  color: var(--kit-color, var(--accent-color));
  transform: translateX(2px);
}

/* Taxonomy Selection */
.taxonomy-selection {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.taxonomy-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.taxonomy-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
}

.taxonomy-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
}

.taxonomy-search input::placeholder {
  color: var(--text-tertiary);
}

.taxonomy-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.taxonomy-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-secondary);
}

.taxonomy-node {
  margin-bottom: 2px;
}

.taxonomy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
  margin: 0 8px;
}

.taxonomy-item:hover {
  background: var(--bg-hover);
}

.taxonomy-item.selectable:hover {
  background: var(--accent-color-light);
  color: var(--accent-color);
}

.taxonomy-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 2px;
}

.taxonomy-chevron:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.taxonomy-icon {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.taxonomy-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.taxonomy-count {
  font-size: 12px;
  color: var(--text-tertiary);
}

.taxonomy-arrow {
  color: var(--text-tertiary);
}

.taxonomy-children {
  margin-left: 16px;
}

/* Template Selection */
.template-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.back-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 20px;
}

.template-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.template-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.template-card.selected {
  background: var(--accent-color-light);
  border-color: var(--accent-color);
}

.template-card .template-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--accent-color-light);
  color: var(--accent-color);
  border-radius: 8px;
}

.template-card .template-content {
  flex: 1;
}

.template-card .template-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.template-card .template-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 12px;
}

.template-card .template-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.template-card .template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-card .template-tag {
  padding: 2px 6px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border-radius: 4px;
  font-size: 11px;
}

/* Template Preview */
.template-preview {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
}

.template-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.template-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent-color-light);
  color: var(--accent-color);
  border-radius: 6px;
}

.template-preview-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.template-preview-info p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.template-preview-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.template-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Footer Info */
.footer-info {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
  .workflow-creation-modal {
    width: 95vw;
    max-height: 95vh;
    margin: 10px;
  }

  .workflow-creation-modal-header {
    padding: 16px 20px;
  }

  .workflow-creation-modal-content {
    padding: 0;
  }

  .kit-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .kit-card {
    padding: 20px;
  }

  .kit-header {
    padding: 16px 20px;
  }

  .kit-search {
    padding: 10px 14px;
  }

  .workflow-template-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .template-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .taxonomy-header {
    padding: 12px 16px;
  }

  .template-header {
    padding: 12px 16px;
  }

  .workflow-creation-modal-footer {
    padding: 16px 20px;
  }

  .modal-title-section h2 {
    font-size: 18px;
  }

  .modal-breadcrumb {
    font-size: 12px;
  }

  .kit-name {
    font-size: 16px;
  }

  .kit-description {
    font-size: 13px;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .workflow-creation-modal-overlay,
  .workflow-creation-modal,
  .kit-card,
  .template-card,
  .create-btn {
    animation: none !important;
    transition: none !important;
  }

  .workflow-creation-modal::before {
    animation: none !important;
  }

  .kit-card:hover,
  .template-card:hover,
  .create-btn:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .workflow-creation-modal {
    border-width: 2px;
    border-color: #ffffff;
  }

  .kit-card,
  .template-card,
  .create-btn {
    border-width: 2px;
  }
}

/* Focus styles for keyboard navigation */
.kit-card:focus-visible,
.template-card:focus-visible,
.create-btn:focus-visible,
.back-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Enhanced light theme adjustments */
[data-theme="light"] .workflow-creation-modal {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .workflow-creation-modal::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%);
}
.explorer-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.explorer-tabs-header {
  display: flex;
  align-items: center;
  padding: 0;
  background-color: var(--bg-surface-2, #181825);
  border-bottom: 1px solid var(--border-primary, #3c3c3c);
  height: 40px;
  flex-shrink: 0;
  width: 100%;
  overflow: visible;
  z-index: 10;
}

.explorer-tabs-tabs {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.explorer-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  border: none;
  background: none;
  color: var(--text-primary, #ffffff) !important;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.explorer-tab:hover {
  color: var(--text-primary, #f8f8f2);
  background-color: var(--bg-surface-3, #313244);
  opacity: 1;
  transform: translateY(-1px);
}

.explorer-tab.active {
  color: var(--text-primary, #ffffff);
  background-color: var(--primary, #8b5cf6);
  font-weight: 600;
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.explorer-tabs-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.explorer-tab-content {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.explorer-tab-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.placeholder-content {
  text-align: center;
  color: var(--text-secondary, #666666);
}

.placeholder-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #333333);
}

.placeholder-content p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

/* Light theme (default) */
:root[data-theme="light"] .explorer-tabs-header {
  background: var(--bg-surface-2, #f3f3f3);
  border-bottom-color: var(--border-primary, #e7e7e7);
}

:root[data-theme="light"] .explorer-tab {
  color: var(--text-primary, #1a1a1a) !important;
  opacity: 1;
  text-shadow: none;
  font-weight: 600;
}

:root[data-theme="light"] .explorer-tab:hover {
  color: var(--text-primary, #f8f8f2);
  background-color: var(--bg-surface-3, #313244);
}

:root[data-theme="light"] .explorer-tab.active {
  color: var(--text-primary, #ffffff);
  background-color: var(--primary, #0078d4);
  font-weight: 500;
}

:root[data-theme="light"] .placeholder-content h4 {
  color: var(--text-primary, #333333);
}

:root[data-theme="light"] .placeholder-content {
  color: var(--text-secondary, #666666);
}

/* Dark theme support */
:root[data-theme="dark"] .explorer-tabs-header {
  background: var(--bg-surface-2, #252526);
  border-bottom-color: var(--border-primary, #444444);
}

:root[data-theme="dark"] .explorer-tab {
  color: var(--text-primary, #ffffff) !important;
  opacity: 1;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .explorer-tab:hover {
  color: var(--text-primary, #f8f8f2);
  background-color: var(--bg-surface-3, #313244);
}

:root[data-theme="dark"] .explorer-tab.active {
  color: var(--text-primary, #ffffff);
  background-color: var(--primary, #0078d4);
  font-weight: 500;
}

:root[data-theme="dark"] .placeholder-content h4 {
  color: var(--text-primary, #f8f8f2);
}

:root[data-theme="dark"] .placeholder-content {
  color: var(--text-secondary, #cccccc);
}

/* Content-Focused Mode Styles */
.explorer-tabs.content-focused {
  /* Enhanced styling for content-focused interface */
}

.explorer-tabs.content-focused .explorer-tabs-header {
  background: var(--bg-surface-1, #ffffff);
  border-bottom: 1px solid var(--border-secondary, #d0d0d0);
}

.explorer-tabs.content-focused .explorer-tab {
  font-weight: 600;
  padding: 12px 16px;
  font-size: 14px;
}

.explorer-tabs.content-focused .explorer-tab.active {
  background: var(--primary, #007acc);
  color: white;
  border-bottom-color: var(--primary, #007acc);
}

.explorer-tabs.content-focused .explorer-tab:hover:not(.active) {
  background: var(--bg-surface-2, #f8f9fa);
}

/* Developer Mode Styles */
.explorer-tabs.developer-mode {
  /* Keep existing developer interface styling */
}

/* Content-Focused Responsive */
@media (max-width: 768px) {
  .explorer-tabs.content-focused .explorer-tab {
    font-size: 13px;
    padding: 10px 12px;
  }
}
/* Base styles for the resizable sidebar */
.resizable-sidebar {
  position: relative;
  height: 100%;
  min-width: 200px;
  max-width: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 0 0 auto; /* Don't grow or shrink */
  z-index: 10;
  will-change: width; /* Optimize for width changes */
}

/* Content container that holds all sidebar items */
.resizable-sidebar-content {
  height: 100%;
  width: 100%;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow content to shrink */
  min-width: 0; /* Allow content to shrink */
  box-sizing: border-box;
  will-change: contents; /* Optimize for content changes */
}

/* Ensure all direct children of content container take full width */
.resizable-sidebar-content > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
}

/* Resize handle */
.resizable-handle {
  position: absolute;
  top: 0;
  right: -4px; /* Position it slightly outside the sidebar for better UX */
  width: 12px; /* Wider handle for easier grabbing */
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  z-index: 1001;
  touch-action: none;
}

/* Add a visible indicator for the handle */
.resizable-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 4px;
  background-color: rgba(128, 128, 128, 0.2);
  transition: background-color 0.2s;
}

/* Hover and active states for the resize handle */
.resizable-handle:hover::after,
.resizable-handle.dragging::after {
  background-color: rgba(0, 120, 215, 0.7);
  width: 4px;
}

/* Light theme adjustments */
:root[data-theme="light"] .resizable-handle::after {
  background-color: rgba(128, 128, 128, 0.2);
}

:root[data-theme="light"] .resizable-handle:hover::after,
:root[data-theme="light"] .resizable-handle.dragging::after {
  background-color: rgba(0, 122, 204, 0.7);
}

/* Dark theme adjustments */
:root[data-theme="dark"] .resizable-handle::after {
  background-color: rgba(128, 128, 128, 0.3);
}

:root[data-theme="dark"] .resizable-handle:hover::after,
:root[data-theme="dark"] .resizable-handle.dragging::after {
  background-color: rgba(100, 180, 255, 0.7);
}

/* Disable all transitions during resize for better performance */
body.resizing *,
body.resizing-sidebar * {
  transition: none !important;
  animation: none !important;
}

/* Ensure all tool panel content properly fills the sidebar */
.resizable-sidebar .tool-panel-content,
.resizable-sidebar .tool-panel-list,
.resizable-sidebar .tool-panel-item,
.resizable-sidebar .tool-panel-label {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Ensure the tool panel list takes available space */
.resizable-sidebar .tool-panel-list {
  flex: 1 !important;
  overflow-y: auto !important;
}

/* Ensure tool panel items wrap text properly */
.resizable-sidebar .tool-panel-item {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
/* SidebarFixes.css - Global fixes for sidebar resizing issues */

/* Ensure all elements inside the sidebar properly resize */
.resizable-sidebar *,
.tool-panel-content *,
.tool-panel-list *,
.tool-panel-item *,
.tool-panel-label * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure proper flexbox behavior */
.resizable-sidebar,
.resizable-sidebar-content,
.tool-panel-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Ensure tool panel list takes available space */
.tool-panel-list {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Ensure tool panel items wrap text properly */
.tool-panel-item {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* Ensure tool panel labels wrap text properly */
.tool-panel-label {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Disable all transitions during resize for better performance */
body.resizing *,
body.resizing-sidebar * {
  transition: none !important;
  animation: none !important;
}
/* packages/frontend/src/components/layout/MainContentArea.module.css */
._mainContentWrapper_h4uam_2 {
  flex: 1 1 auto !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-darkest);
  color: var(--text-primary);
  min-width: 0 !important; /* Allow content to shrink below its natural width */
  min-height: 0 !important; /* Allow content to shrink below its natural height */
  width: 100% !important;
  /* Removed height: 100% to allow proper flexbox resizing */
}

._mainContent_h4uam_2 {
  flex: 1 1 auto !important;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Let child components handle their own scrolling */
  position: relative;
  padding: 0; /* Remove padding to allow PanelManager to fill the space */
  /* Removed height: 100% to allow proper flexbox resizing */
  width: 100% !important; /* Ensure it takes full width */
  min-width: 0 !important; /* Allow content to shrink below its natural width */
  min-height: 0 !important; /* Allow content to shrink below its natural height */
}

/* Pane system styles */
._panesContainer_h4uam_29 {
  display: flex;
  flex-direction: row;
  width: 100%;
  /* Removed height: 100% to allow proper flexbox resizing */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

._pane_h4uam_29 {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 200px;
  /* Removed height: 100% to allow proper flexbox resizing */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

._paneSplitter_h4uam_50 {
  width: 5px;
  background-color: var(--bg-darker);
  cursor: col-resize;
  transition: background-color 0.2s;
  z-index: 5;
}

._paneSplitter_h4uam_50:hover,
._paneSplitter_h4uam_50:active {
  background-color: var(--primary);
}

/* Drop zone indicators */
._dropZoneIndicator_h4uam_64 {
  position: absolute;
  z-index: 100;
  background-color: var(--primary);
  opacity: 0.3;
  pointer-events: none;
}

._dropZone-left_h4uam_72 {
  left: 0;
  top: 0;
  width: 30%;
  /* Removed height: 100% to allow proper flexbox resizing */
  bottom: 0;
}

._dropZone-right_h4uam_80 {
  right: 0;
  top: 0;
  width: 30%;
  /* Removed height: 100% to allow proper flexbox resizing */
  bottom: 0;
}

._dropZone-top_h4uam_88 {
  left: 0;
  top: 0;
  width: 100%;
  height: 30%;
}

._dropZone-bottom_h4uam_95 {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30%;
}

._mainContent_h4uam_2::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

._mainContent_h4uam_2::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--radius-sm);
}

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

/* Tab styling overrides */
._mainContent_h4uam_2 .multi-tabs-view {
  /* Removed height: 100% to allow proper flexbox resizing */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Container hides overflow, content area handles scrolling */
  min-height: 0; /* Critical: Allow flex container to shrink */
  flex: 1 1 auto; /* Allow it to grow and shrink with available space */
}

._mainContent_h4uam_2 .tabs-header-bar {
  background-color: var(--bg-darker);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._mainContent_h4uam_2 .tab-content-area {
  flex: 1 1 auto;
  overflow: hidden; /* Let the tab scrollable content area handle scrolling */
  position: relative;
  background-color: var(--bg-medium);
  min-height: 0; /* Critical: Allow flex item to shrink */
}

/* Special override for block editor content */
._mainContent_h4uam_2 .tab-content-area:has(._enhanced-block-editor_h4uam_141) {
  overflow: hidden !important; /* Keep container overflow hidden */
  /* Removed height: 100% to allow proper flexbox resizing */
  min-height: 0 !important; /* Allow shrinking */
}

/* Ensure tab scrollable content area can scroll with block editor */
._mainContent_h4uam_2 .tab-scrollable-content-area:has(._enhanced-block-editor_h4uam_141) {
  overflow-y: auto !important; /* Enable scrolling for block editor */
  overflow-x: hidden !important;
}

/* Light theme overrides */
:root[data-theme="light"] ._mainContentWrapper_h4uam_2 {
  background-color: var(--light-bg-medium);
  box-shadow: inset 0 1px 0 var(--light-border-color);
}

:root[data-theme="light"] ._mainContent_h4uam_2 {
  background-color: var(--light-bg-medium);
}

:root[data-theme="light"] ._mainContent_h4uam_2 .multi-tabs-view {
  border-color: var(--light-border-color);
}

:root[data-theme="light"] ._mainContent_h4uam_2 .tabs-header-bar {
  background-color: var(--light-bg-darker);
  border-color: var(--light-border-color);
}

:root[data-theme="light"] ._mainContent_h4uam_2 .tab-content-area {
  background-color: var(--light-bg-medium);
}._contentRenderer_19esx_1 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 100px); /* Ensure minimum height for Block Editor */
  overflow: visible; /* Allow content to expand naturally */
  position: relative;
}

/* Common styles for all content types */
._unknownContent_19esx_13,
._editorPlaceholder_19esx_14,
._homeContent_19esx_15,
._genericContent_19esx_16,
._editorLoading_19esx_17,
._placeholderContent_19esx_18 {
  padding: 20px;
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Headings */
._unknownContent_19esx_13 h3,
._editorPlaceholder_19esx_14 h3,
._homeContent_19esx_15 h2,
._genericContent_19esx_16 h3,
._placeholderContent_19esx_18 h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--primary, #007acc);
}

/* Code blocks */
._unknownContent_19esx_13 pre,
._editorPlaceholder_19esx_14 pre,
._genericContent_19esx_16 pre,
._dataPreview_19esx_44 pre {
  background-color: var(--bg-surface-2, #252526);
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
  margin-top: 10px;
  flex: 1;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
}

/* Editor placeholder */
._editorPlaceholder_19esx_14 {
  background-color: var(--bg-surface-1, #1e1e1e);
  border-radius: 4px;
}

._dataPreview_19esx_44 {
  margin-top: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

._dataPreview_19esx_44 h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--text-secondary, #cccccc);
}

/* Home content */
._homeContent_19esx_15 h2 {
  margin-top: 0;
}

._homeContent_19esx_15 ul {
  margin-top: 20px;
  padding-left: 20px;
}

._homeContent_19esx_15 li {
  margin-bottom: 10px;
}

/* Generic content */
._genericContent_19esx_16 h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

/* Loading spinner */
._editorLoading_19esx_17 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--bg-surface-1, #1e1e1e);
}

._loadingSpinner_19esx_105 {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 122, 204, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary, #007acc);
  animation: _spin_19esx_1 1s ease-in-out infinite;
  margin-bottom: 20px;
}

@keyframes _spin_19esx_1 {
  to {
    transform: rotate(360deg);
  }
}

/* Image viewer styles */
._imageViewer_19esx_122 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1, #1e1e1e);
}

._imageContainer_19esx_131 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 20px;
}

._imageContainer_19esx_131 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

._imageContainer_19esx_131 ._errorImage_19esx_147 {
  width: 100px;
  height: 100px;
  opacity: 0.5;
}

._noImage_19esx_153 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: var(--bg-surface-2, #252526);
  border-radius: 8px;
  color: var(--text-secondary, #cccccc);
  font-size: 14px;
}

._imageControls_19esx_165 {
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: var(--bg-surface-2, #252526);
  border-top: 1px solid var(--border-color, #444444);
}

._editButton_19esx_173 {
  padding: 8px 16px;
  background-color: var(--primary, #007acc);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

._editButton_19esx_173:hover {
  background-color: var(--primary-hover, #0098ff);
}

/* Enhanced chat placeholder styles */
._enhancedChatPlaceholder_19esx_189 {
  padding: 32px;
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg,
    var(--bg-surface-1, #1e1e1e) 0%,
    var(--bg-surface-2, #252526) 100%);
  border-radius: 12px;
  margin: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color, #444444);
}

._enhancedChatPlaceholder_19esx_189 h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--primary, #007acc);
  font-size: 24px;
  font-weight: 600;
}

._enhancedChatPlaceholder_19esx_189 p {
  margin-bottom: 16px;
  color: var(--text-secondary, #cccccc);
  font-size: 16px;
  line-height: 1.5;
}

._enhancedChatPlaceholder_19esx_189 ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  text-align: left;
  max-width: 400px;
}

._enhancedChatPlaceholder_19esx_189 li {
  margin-bottom: 12px;
  padding: 8px 12px;
  background-color: rgba(0, 122, 204, 0.1);
  border-radius: 6px;
  border-left: 3px solid var(--primary, #007acc);
  font-size: 14px;
  color: var(--text-primary, #f8f8f2);
}

._enhancedChatPlaceholder_19esx_189 strong {
  color: var(--primary, #007acc);
  font-weight: 600;
}

._enhancedChatPlaceholder_19esx_189 em {
  color: #4caf50;
  font-style: normal;
  font-weight: 500;
  background-color: rgba(76, 175, 80, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 16px;
  display: inline-block;
}

/* Enhanced Welcome Screen Styles */
._enhancedWelcome_19esx_259 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 3rem 2rem;
  overflow-y: auto;
  color: var(--text-primary);
  background: var(--bg-primary);
}

._welcomeHeader_19esx_271 {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 800px;
}

._quoteSection_19esx_277 {
  margin-bottom: 2rem;
}

._inspiringQuote_19esx_281 {
  font-size: 1.5rem;
  font-style: italic;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  font-weight: 500;
  line-height: 1.4;
}

._quoteAuthor_19esx_290 {
  font-size: 1rem;
  color: var(--text-secondary);
  font-style: normal;
  font-weight: 600;
}

._welcomeTitle_19esx_297 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

._welcomeSubtitle_19esx_308 {
  font-size: 1.3rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

._sectionTitle_19esx_315 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--text-primary);
}

._quickActions_19esx_323 {
  margin-bottom: 3rem;
  width: 100%;
  max-width: 900px;
}

._actionGrid_19esx_329 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

._actionCard_19esx_336 {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-surface-2);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  color: var(--text-primary);
  text-decoration: none;
}

._actionCard_19esx_336:hover {
  border-color: var(--primary);
  background: var(--bg-surface-3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

._actionIcon_19esx_358 {
  font-size: 2.5rem;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-3);
  border-radius: 10px;
}

._actionContent_19esx_370 h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

._actionContent_19esx_370 p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

._navigationHelp_19esx_384 {
  width: 100%;
  max-width: 900px;
  margin-bottom: 2rem;
}

._featuresSection_19esx_390 {
  width: 100%;
  max-width: 900px;
  margin-bottom: 2rem;
}

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

._featureItem_19esx_402 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--bg-surface-1);
  border-radius: 10px;
  border: 1px solid var(--border-secondary);
  transition: all 0.2s ease;
}

._featureItem_19esx_402:hover {
  background: var(--bg-surface-2);
  border-color: var(--border-primary);
  transform: translateY(-1px);
}

._featureIcon_19esx_419 {
  font-size: 1.5rem;
  flex-shrink: 0;
}

._featureItem_19esx_402 strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}

._featureItem_19esx_402 p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

._helpSection_19esx_438 h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--text-primary);
}

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

._helpItem_19esx_452 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-surface-1);
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
}

._helpIcon_19esx_462 {
  font-size: 1.5rem;
  flex-shrink: 0;
}

._helpItem_19esx_452 strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}

._helpItem_19esx_452 p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

._quickTip_19esx_481 {
  width: 100%;
  max-width: 600px;
  margin-top: auto;
  padding-top: 2rem;
}

._tipContent_19esx_488 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

._tipIcon_19esx_500 {
  font-size: 1.2rem;
  flex-shrink: 0;
}

._tipContent_19esx_488 kbd {
  background: var(--bg-surface-3);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
  ._enhancedWelcome_19esx_259 {
    padding: 2rem 1rem;
  }

  ._inspiringQuote_19esx_281 {
    font-size: 1.2rem;
  }

  ._welcomeTitle_19esx_297 {
    font-size: 2rem;
  }

  ._welcomeSubtitle_19esx_308 {
    font-size: 1.1rem;
  }

  ._sectionTitle_19esx_315 {
    font-size: 1.4rem;
  }

  ._actionGrid_19esx_329 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  ._actionCard_19esx_336 {
    padding: 1.25rem;
  }

  ._helpGrid_19esx_446 {
    grid-template-columns: 1fr;
  }

  ._featuresGrid_19esx_396 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  ._enhancedWelcome_19esx_259 {
    padding: 1.5rem 1rem;
  }

  ._inspiringQuote_19esx_281 {
    font-size: 1.1rem;
  }

  ._welcomeTitle_19esx_297 {
    font-size: 1.8rem;
  }

  ._actionCard_19esx_336 {
    padding: 1rem;
  }

  ._actionIcon_19esx_358 {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }
}
/* Text editor wrapper styles are now consolidated below at line 550+ */

.tiptap-editor-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

/* Basic styling for the Tiptap editor content area */
.tiptap-editor-content .ProseMirror {
  flex: 1 1 auto;
  padding: 24px 32px; /* Normal padding - footer now uses flex positioning */
  color: var(--text-primary, #e6e6e6);
  background: transparent;
  overflow-y: auto;
  min-height: 0;
  outline: none;
  font-size: 1.13rem;
  line-height: 1.85;
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0.01em;
  transition: background 0.2s;
  box-sizing: border-box;
  width: 100%;
}

/* Placeholder styling */
.tiptap-editor-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--text-tertiary, #6c6c6c);
  pointer-events: none;
  height: 0;
  font-size: 1.13rem;
  opacity: 0.7;
}

/* Add some basic styling for common elements */
.tiptap-editor-content .ProseMirror h1,
.tiptap-editor-content .ProseMirror h2,
.tiptap-editor-content .ProseMirror h3 {
  margin-top: 2.2em;
  margin-bottom: 0.7em;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tiptap-editor-content .ProseMirror p {
  margin-bottom: 1.2em;
}

.tiptap-editor-content .ProseMirror strong {
  font-weight: bold;
}

.tiptap-editor-content .ProseMirror em {
  font-style: italic;
}

/* Light theme overrides */
:root[data-theme="light"] .text-editor-wrapper {
  background-color: var(--bg-surface-1-light, #ffffff);
}

:root[data-theme="light"] .tiptap-editor-content .ProseMirror {
  color: var(--text-primary-light, #333333);
  background-color: var(--bg-surface-1-light, #ffffff);
}

:root[data-theme="light"] .tiptap-editor-content .ProseMirror p.is-editor-empty:first-child::before {
  color: var(--text-tertiary, #999999);
}

:root[data-theme="light"] .tiptap-editor-content .ProseMirror h1,
:root[data-theme="light"] .tiptap-editor-content .ProseMirror h2,
:root[data-theme="light"] .tiptap-editor-content .ProseMirror h3 {
  color: var(--text-primary-light, #333333);
}

/* Add more specific styles as needed */

.text-editor-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--bg-surface-2, #22242c) !important;
  border-bottom: 1px solid var(--border-color, #2a2e36) !important;
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0 !important;
  align-items: center !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
.text-editor-toolbar button {
  background: none !important;
  border: none !important;
  color: var(--text-primary, #d4d4d4) !important;
  font-size: 1rem !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
}
.text-editor-toolbar button:hover, .text-editor-toolbar button:focus {
  background: var(--bg-surface-3, #2a2e36);
  color: var(--primary, #4f8cff);
  outline: none;
  box-shadow: 0 2px 8px var(--primary-light, rgba(79,140,255,0.08));
}
/* Footer styles are now consolidated below at line 560+ */
.text-editor-help-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-surface-1, #1e1e1e);
  color: var(--text-primary, #d4d4d4);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 32px 28px 24px 28px;
  z-index: 10000;
  min-width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}
.text-editor-help-modal h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.2em;
}
.text-editor-help-modal ul {
  margin: 0 0 16px 0;
  padding-left: 18px;
}
.text-editor-help-modal button {
  margin-top: 8px;
  background: var(--primary, #4f8cff);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 1em;
  cursor: pointer;
}
.text-editor-help-modal button:hover {
  background: var(--primary-dark, #3576d1);
}

.callout {
  margin: 1.5em 0;
  border-radius: 8px;
  border: 1.5px solid var(--border-color, #333);
  background: var(--bg-surface-2, #23272e);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 0;
  overflow: hidden;
  transition: border 0.2s, background 0.2s;
}
.callout-info {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}
.callout-success {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
}
.callout-warning {
  border-color: #f59e42;
  background: rgba(245, 158, 66, 0.08);
}
.callout-error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.callout-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.05em;
  padding: 0.7em 1.1em 0.3em 1.1em;
  color: var(--text-primary, #d4d4d4);
  letter-spacing: 0.01em;
}
.callout-info .callout-title { color: #3b82f6; }
.callout-success .callout-title { color: #22c55e; }
.callout-warning .callout-title { color: #f59e42; }
.callout-error .callout-title { color: #ef4444; }
.callout-body {
  padding: 0 1.1em 1em 1.1em;
  color: var(--text-secondary, #b0b0b0);
  font-size: 1em;
}

/* Optional: Add icon styling if you want to add icons to the title */
.callout-title svg {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* Custom scrollbars */
.tiptap-editor-content .ProseMirror::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}
.tiptap-editor-content .ProseMirror::-webkit-scrollbar-thumb {
  background: #23272e;
  border-radius: 8px;
}
.tiptap-editor-content .ProseMirror::-webkit-scrollbar-thumb:hover {
  background: #2a2e36;
}

/* Block spacing */
.tiptap-editor-content .ProseMirror > * + * {
  margin-top: 0.7em;
}

/* Toolbar two-row layout */
.toolbar-row-1, .toolbar-row-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-surface-2, #22242c) !important;
  border-radius: 0;
  z-index: 10;
  flex-shrink: 0;
}
.toolbar-row-1 {
  border-bottom: 1px solid var(--border-color, #2a2e36) !important;
  margin-bottom: 0;
}
.toolbar-row-2 {
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-color, #2a2e36) !important;
}
.table-controls-group {
  display: inline-flex;
  gap: 0.1rem;
  margin-left: 0.25rem;
}
.toolbar-divider {
  margin: 0 0.5rem;
  color: #d1d5db;
}

/* Notion-style callout blockquotes */
.tiptap-editor-content blockquote {
  border-left: 4px solid #a3a3a3;
  background: #23272e;
  padding: 0.5em 1em;
  margin: 0.5em 0;
  border-radius: 6px;
  position: relative;
  font-size: 1.08em;
  transition: border 0.2s, background 0.2s;
}
.tiptap-editor-content blockquote.info {
  border-color: #3b82f6;
  background: #1e293b;
}
.tiptap-editor-content blockquote.warning {
  border-color: #f59e42;
  background: #3b2f1e;
}
.tiptap-editor-content blockquote.success {
  border-color: #22c55e;
  background: #1e3b2a;
}
.tiptap-editor-content blockquote .callout-icon {
  position: absolute;
  left: -2.2em;
  top: 0.7em;
  font-size: 1.2em;
  opacity: 0.7;
}

/* Slash menu hint */
.slash-menu-hint {
  font-style: italic;
  color: #a3a3a3;
  margin-left: 1em;
}

.inline-assistant-hint {
  font-style: italic;
  color: #a3a3a3;
  margin-left: 1em;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Block drag handle (visual only) */
.tiptap-editor-content .ProseMirror > * {
  position: relative;
}
.tiptap-editor-content .ProseMirror > *:hover .block-drag-handle,
.tiptap-editor-content .ProseMirror > *:focus-within .block-drag-handle {
  opacity: 1;
}
.block-drag-handle {
  position: absolute;
  left: -2.2em;
  top: 0.5em;
  font-size: 1.2em;
  color: #a3a3a3;
  opacity: 0;
  cursor: grab;
  user-select: none;
  transition: opacity 0.15s;
  z-index: 2;
}

/* Standardized toolbar container */
.standardized-toolbar-container {
  position: relative !important;
  z-index: 100 !important;
  margin-bottom: 0 !important;
}

.standardized-text-editor-toolbar {
  background-color: var(--bg-surface-2, #22242c) !important;
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-color, #2a2e36) !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

/* AI icon styling */
.ai-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  color: var(--primary);
  background-color: var(--primary-light, rgba(79, 140, 255, 0.1));
  border-radius: 4px;
  padding: 2px 4px;
}

/* AI Assist button styling */
.ai-assist-toolbar-button {
  background: linear-gradient(135deg, var(--primary, #4f8cff) 0%, var(--primary-light, #a78bfa) 100%) !important;
  color: white !important;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px var(--primary-light, rgba(79, 140, 255, 0.2));
}

.ai-assist-toolbar-button:hover {
  box-shadow: 0 4px 12px var(--primary-light, rgba(79, 140, 255, 0.3)) !important;
  transform: translateY(-1px);
}

.ai-assist-toolbar-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px var(--primary-light, rgba(79, 140, 255, 0.2)) !important;
}

.inline-assist-button {
  background-color: var(--bg-surface-3, #45475a) !important;
  color: var(--text-primary, #cdd6f4) !important;
  margin-left: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.inline-assist-button:hover {
  background-color: var(--bg-surface-4, #585b70) !important;
  transform: translateY(-1px);
}

.inline-assist-button:active {
  transform: translateY(0);
}

:root[data-theme="light"] .inline-assist-button {
  background-color: var(--bg-surface-3-light, #e0e0e0) !important;
  color: var(--text-primary-light, #333333) !important;
}

:root[data-theme="light"] .inline-assist-button:hover {
  background-color: var(--bg-surface-4-light, #d0d0d0) !important;
}

/* Collaboration cursor styles */
.collaboration-cursor {
  animation: blink 1s infinite;
}

.collaboration-cursor-label {
  animation: fadeInOut 3s ease-in-out;
  animation-delay: 0.5s;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-2px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

/* Hide cursor labels after a few seconds to reduce clutter */
.collaboration-cursor-label {
  transition: opacity 0.3s ease;
}

.collaboration-cursor:not(:hover) .collaboration-cursor-label {
  animation-delay: 2s;
}

/* Active button state for collaboration toggle */
.text-editor-toolbar button.active {
  background-color: var(--primary-transparent, rgba(116, 199, 236, 0.2));
  color: var(--primary, #74c7ec);
  border-color: var(--primary, #74c7ec);
}

:root[data-theme="light"] .text-editor-toolbar button.active {
  background-color: var(--primary-transparent-light, rgba(0, 120, 212, 0.1));
  color: var(--primary-light, #0078d4);
  border-color: var(--primary-light, #0078d4);
}

/* Main layout styles are now consolidated below at line 542+ */

.text-editor-content-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.text-editor-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 16px 0;
  overflow-y: auto;
}

.document-panel {
  margin-bottom: 16px;
}

/* Focus styles for better accessibility */
.has-focus {
  outline: 2px solid var(--accent-primary, #4f8cff);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive design for smaller screens */
@media (max-width: 1024px) {
  .text-editor-sidebar {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .text-editor-main-layout {
    flex-direction: column;
  }

  .text-editor-sidebar {
    width: 100%;
    padding: 16px 0 0 0;
    border-top: 1px solid var(--border-color);
  }

  .document-panel {
    margin-bottom: 12px;
  }
}

/* Clean flex-based footer positioning - RESEARCH-BASED SOLUTION */
.text-editor-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  /* CRITICAL: Container needs defined height for flex layout to work */
  min-height: 500px;
  max-width: none;
  max-height: none;
  overflow: hidden;
  background: var(--bg-surface-1, #181a20);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  padding: 0;
  margin: 0;
  transition: box-shadow 0.2s;
  box-sizing: border-box;
  flex: 1 1 auto;
}

.text-editor-main-layout {
  /* CRITICAL: Use flex: 1 to push footer to bottom */
  flex: 1;
  display: flex;
  min-height: 0;
  gap: 16px;
  overflow: hidden;
}

/* OLD TEXT EDITOR FOOTER DELETED - Now using unified collaboration footer */

/**
 * Universal Drop Zone Styles
 * Unified styling for all drop zones across the application
 */

.universal-drop-zone {
  position: relative;
  width: 100%;
  min-height: 120px;
  border: 2px dashed var(--border-color, #e0e0e0);
  border-radius: 12px;
  background: var(--bg-surface-1, #ffffff);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.universal-drop-zone.disabled {
  opacity: 0.6;
  pointer-events: none;
  background: var(--bg-surface-disabled, #f5f5f5);
}

.universal-drop-zone.has-content {
  border-style: solid;
  border-color: transparent;
  background: transparent;
  padding: 0;
  min-height: auto;
}

.universal-drop-zone.drag-over {
  border-color: var(--primary, #3b82f6);
  background: var(--primary-bg, rgba(59, 130, 246, 0.05));
  transform: scale(1.02);
}

.universal-drop-zone.drag-denied {
  border-color: var(--error, #ef4444);
  background: var(--error-bg, rgba(239, 68, 68, 0.05));
  animation: shake 0.3s ease-in-out;
}

.universal-drop-zone.processing {
  pointer-events: none;
}

/* Placeholder content */
.drop-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  color: var(--text-secondary, #6b7280);
  padding: 1rem;
}

.drop-placeholder h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}

.drop-placeholder p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.drop-placeholder small {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Drop indicator overlay */
.drop-indicator-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
  border-radius: 12px;
  animation: fadeIn 0.2s ease;
}

.drop-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--bg-surface-1, #ffffff);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 2px solid;
  transition: all 0.2s ease;
  min-width: 200px;
  text-align: center;
}

.drop-indicator.allowed {
  border-color: var(--success, #10b981);
  color: var(--success, #10b981);
}

.drop-indicator.denied {
  border-color: var(--error, #ef4444);
  color: var(--error, #ef4444);
}

.drop-indicator span {
  font-weight: 600;
  font-size: 0.875rem;
}

/* Feedback message */
.drop-feedback {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  animation: slideIn 0.3s ease;
}

.feedback-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}

.feedback-message.success {
  background: var(--success-bg, rgba(16, 185, 129, 0.1));
  color: var(--success, #10b981);
  border: 1px solid var(--success, #10b981);
}

.feedback-message.error {
  background: var(--error-bg, rgba(239, 68, 68, 0.1));
  color: var(--error, #ef4444);
  border: 1px solid var(--error, #ef4444);
}

.feedback-message button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.feedback-message button:hover {
  opacity: 1;
}

/* Processing overlay */
.processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  z-index: 999;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
}

.processing-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color, #e0e0e0);
  border-top: 2px solid var(--primary, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .universal-drop-zone {
    min-height: 100px;
    padding: 0.75rem;
  }
  
  .drop-placeholder {
    gap: 0.5rem;
    padding: 0.75rem;
  }
  
  .drop-placeholder h4 {
    font-size: 0.875rem;
  }
  
  .drop-placeholder p {
    font-size: 0.75rem;
  }
  
  .drop-indicator {
    padding: 1rem;
    min-width: 160px;
  }
  
  .drop-feedback {
    top: 0.5rem;
    right: 0.5rem;
  }
}
.todo-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.todo-list-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo-list-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.todo-list-stats {
  font-size: 14px;
  color: var(--text-secondary);
}

.todo-list-filters {
  display: flex;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
}

.todo-list-filters button {
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}

.todo-list-filters button:hover {
  background-color: var(--bg-surface-2);
}

.todo-list-filters button.active {
  background-color: var(--primary-color);
  color: white;
}

.todo-list-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.todo-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color-light);
  transition: background-color 0.2s;
}

.todo-item:hover {
  background-color: var(--bg-surface-2);
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.todo-checkbox-container {
  margin-right: 12px;
  position: relative;
}

.todo-checkbox-container input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  cursor: pointer;
  width: 20px;
  height: 20px;
  z-index: 1;
}

.todo-checkbox {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 3px;
  position: relative;
}

.todo-checkbox-container input[type="checkbox"]:checked + .todo-checkbox::after {
  content: '✓';
  position: absolute;
  top: -2px;
  left: 3px;
  color: var(--primary-color);
  font-size: 16px;
}

.todo-text {
  flex: 1;
  font-size: 14px;
  margin-right: 10px;
  word-break: break-word;
}

.todo-actions {
  display: flex;
  gap: 8px;
  opacity: 0.3;
  transition: opacity 0.2s;
}

.todo-item:hover .todo-actions {
  opacity: 1;
}

.todo-edit-btn, .todo-delete-btn {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.todo-edit-btn {
  color: var(--text-secondary);
  transition: all 0.2s ease;
  font-weight: 500;
}

.todo-edit-btn:hover {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.todo-delete-btn {
  color: var(--error-color, #ef4444);
  border-color: var(--error-color-alpha, rgba(239, 68, 68, 0.3));
}

.todo-delete-btn:hover {
  background-color: var(--error-color, #ef4444);
  color: white;
  border-color: var(--error-color, #ef4444);
  transform: scale(1.05);
}

.todo-priority {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  background-color: var(--bg-surface-2);
}

.todo-priority.priority-high {
  background-color: rgba(255, 85, 85, 0.2);
  color: var(--bg-danger);
}

.todo-priority.priority-medium {
  background-color: rgba(255, 170, 0, 0.2);
  color: #ff9800;
}

.todo-priority.priority-low {
  background-color: rgba(0, 170, 255, 0.2);
  color: #2196f3;
}

.todo-item.priority-high {
  border-left: 3px solid var(--bg-danger);
}

.todo-item.priority-medium {
  border-left: 3px solid #ff9800;
}

.todo-item.priority-low {
  border-left: 3px solid #2196f3;
}

.todo-edit {
  display: flex;
  flex: 1;
  gap: 8px;
}

.todo-edit input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
}

.todo-save-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}

.todo-add-form {
  display: flex;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  gap: 10px;
}

.todo-add-form input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
}

.todo-add-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
}

.todo-add-btn:hover {
  background-color: var(--primary-color-dark);
}

.todo-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* Dark theme adjustments */
.todo-list.dark .todo-checkbox {
  border-color: var(--border-color-dark);
}

.todo-list.dark .todo-edit input {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

.todo-list.dark .todo-add-form input {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

/* Date Picker Styles */
.todo-add-main {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.todo-text-input {
  flex: 1;
}

.todo-date-btn {
  padding: 8px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.2s;
  white-space: nowrap;
}

.todo-date-btn:hover {
  background: var(--bg-surface-3);
  border-color: var(--accent-color);
}

.todo-date-btn.has-date {
  background: var(--accent-color-alpha);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.todo-date-picker {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.date-picker-header h4 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}

.date-picker-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-picker-close:hover {
  color: var(--text-primary);
}

.date-picker-inputs {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.date-input-group,
.time-input-group {
  flex: 1;
}

.date-input-group label,
.time-input-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.date-input,
.time-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.date-input:focus,
.time-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-color-alpha);
}

.date-picker-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.clear-date-btn,
.done-date-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.clear-date-btn {
  background: var(--bg-surface-1);
  color: var(--text-secondary);
}

.clear-date-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

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

.done-date-btn:hover {
  background: var(--accent-color-hover);
}

/* Due Date Display */
.todo-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-due-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.due-date-icon {
  font-size: 12px;
}

.due-date {
  font-weight: 500;
}

.due-time {
  font-weight: 500;
}

.due-status {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.due-status.overdue {
  background: var(--error-color-alpha);
  color: var(--error-color);
}

.due-status.due-today {
  background: var(--warning-color-alpha);
  color: var(--warning-color);
}

.due-status.due-soon {
  background: var(--accent-color-alpha);
  color: var(--accent-color);
}

.due-status.future {
  background: var(--success-color-alpha);
  color: var(--success-color);
}

/* Enhanced Todo Edit Form */
.todo-edit-form {
  width: 100%;
  background: var(--bg-surface-2);
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  padding: 12px;
  margin: 4px 0;
}

.todo-edit-main {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.todo-edit-text {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.todo-edit-text:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-color-alpha);
}

.todo-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.todo-save-btn {
  padding: 6px 12px;
  background: var(--success-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.todo-save-btn:hover {
  background: var(--success-color-hover);
}

.todo-cancel-btn {
  padding: 6px 12px;
  background: var(--bg-surface-1);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.todo-cancel-btn:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
}
.confirmation-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
}

.confirmation-dialog-icon {
  margin-bottom: 1rem;
}

.confirmation-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 12px;
}

.confirmation-icon.danger {
  background-color: var(--error-color-alpha, rgba(239, 68, 68, 0.1));
  color: var(--error-color, #ef4444);
}

.confirmation-icon.warning {
  background-color: var(--warning-color-alpha, rgba(245, 158, 11, 0.1));
  color: var(--warning-color, #f59e0b);
}

.confirmation-icon.info {
  background-color: var(--info-color-alpha, rgba(59, 130, 246, 0.1));
  color: var(--info-color, #3b82f6);
}

.confirmation-dialog-message {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.confirmation-dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.confirmation-dialog-cancel,
.confirmation-dialog-confirm {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-width: 80px;
}

.confirmation-dialog-cancel {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.confirmation-dialog-cancel:hover {
  background: var(--bg-tertiary);
}

.confirmation-dialog-confirm {
  color: white;
  font-weight: 600;
}

.confirmation-dialog-confirm.danger {
  background: var(--error-color, #ef4444);
}

.confirmation-dialog-confirm.danger:hover {
  background: var(--error-color-hover, #dc2626);
}

.confirmation-dialog-confirm.warning {
  background: var(--warning-color, #f59e0b);
}

.confirmation-dialog-confirm.warning:hover {
  background: var(--warning-color-hover, #d97706);
}

.confirmation-dialog-confirm.info {
  background: var(--info-color, #3b82f6);
}

.confirmation-dialog-confirm.info:hover {
  background: var(--info-color-hover, #2563eb);
}

/* Focus styles for accessibility */
.confirmation-dialog-cancel:focus,
.confirmation-dialog-confirm:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-color-alpha);
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  .confirmation-dialog-message {
    color: var(--text-primary-dark, #f8f9fa);
  }
  
  .confirmation-dialog-cancel {
    background: var(--bg-secondary-dark, #2d3748);
    color: var(--text-primary-dark, #f8f9fa);
    border-color: var(--border-color-dark, #4a5568);
  }
  
  .confirmation-dialog-cancel:hover {
    background: var(--bg-tertiary-dark, #4a5568);
  }
}
.mind-map {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mind-map-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 100;
  background-color: var(--bg-surface-1);
  flex-shrink: 0;
}

.mind-map-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.mind-map-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mind-map-controls button {
  background: var(--primary);
  border: 1px solid var(--primary);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: white;
  transition: none;
  white-space: nowrap;
  min-width: auto;
}

.mind-map-controls button:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

.mindmap-status {
  min-width: 80px;
  text-align: right;
  margin-right: 12px;
}

.mindmap-saving,
.mindmap-saved {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.mindmap-saving {
  color: var(--warning);
  background-color: var(--warning-light);
}

.mindmap-saved {
  color: var(--success);
  background-color: var(--success-light);
}

.mind-map-canvas {
  flex: 1;
  overflow: auto;
  padding: 40px;
  position: relative;
  background-color: var(--bg-surface-1);
  background-image:
    linear-gradient(to right, var(--border-color-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-color-light) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 0;
}

.mind-map-node {
  position: absolute;
  background-color: var(--bg-surface-2);
  border: 2px solid #4285F4;
  border-radius: 8px;
  padding: 10px 15px;
  min-width: 120px;
  max-width: 250px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  user-select: none;
}

.mind-map-node:hover {
  transform: scale(1.02);
}

.mind-map-node.selected {
  z-index: 2;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.mind-map-node.root-node {
  position: absolute;
  background-color: var(--bg-surface-3);
  font-weight: bold;
  border-color: #4285F4;
}

.mind-map-node.root-node:hover {
  transform: scale(1.02);
}

.node-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.node-text {
  word-break: break-word;
  font-size: 14px;
}

.collapse-toggle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bg-surface-3);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-secondary);
}

.node-actions {
  display: flex;
  margin-top: 8px;
  gap: 5px;
}

.node-actions button {
  background: none;
  border: 1px solid var(--border-color);
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.edit-button {
  color: var(--text-secondary);
}

.add-button {
  color: var(--primary-color);
}

.delete-button {
  color: var(--bg-danger);
}

.node-edit {
  width: 100%;
}

.node-edit input {
  width: 100%;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
}

/* Node children are now positioned absolutely, no need for relative layout */
.node-children {
  /* Children are positioned absolutely, this container is just for rendering */
}

/* Dark theme adjustments */
.mind-map.dark .mind-map-canvas {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.mind-map.dark .mind-map-node {
  background-color: var(--bg-surface-2);
}

.mind-map.dark .mind-map-node.root-node {
  background-color: var(--bg-surface-3);
}

.mind-map.dark .node-edit input {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

/* ===== HELP OVERLAY STYLES ===== */

.mindmap-help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mindmap-help-modal {
  background-color: var(--bg-surface-1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
}

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

.mindmap-help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-surface-2);
}

.mindmap-help-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.mindmap-help-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.mindmap-help-close:hover {
  background-color: var(--bg-surface-3);
}

.mindmap-help-content {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.mindmap-help-section {
  margin-bottom: 24px;
}

.mindmap-help-section:last-child {
  margin-bottom: 0;
}

.mindmap-help-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.mindmap-help-section ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.mindmap-help-section li {
  margin-bottom: 8px;
}

.mindmap-help-section li strong {
  color: var(--text-primary);
}

.mindmap-help-section p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.mindmap-help-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-surface-2);
  text-align: center;
}

.mindmap-help-got-it {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mindmap-help-got-it:hover {
  background-color: var(--primary-dark);
}

/* ===== FIRST TIME HINT ===== */

.mindmap-first-time-hint {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  animation: bounceIn 0.5s ease-out;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.mindmap-hint-bubble {
  background-color: var(--primary);
  color: white;
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
}

.mindmap-hint-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid var(--primary);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.mindmap-hint-bubble button {
  background: none;
  border: none;
  color: white;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin-left: 4px;
}

.mindmap-hint-bubble button:hover {
  text-decoration: none;
}

/* Controls styles are now defined above - no conflicting styles */

/* ===== IMPROVED NODE INTERACTIONS ===== */

.mind-map-node {
  user-select: none;
  transition: all 0.2s ease;
  cursor: grab;
  position: relative;
}

.mind-map-node:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--primary, #4285F4);
}

.mind-map-node:active {
  cursor: grabbing;
}

.mind-map-node.dragging {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0.9;
  cursor: grabbing;
  border-color: var(--primary, #4285F4);
}

/* Add visual indicator for interactive elements */
.mind-map-node::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: border-color 0.2s ease;
  pointer-events: none;
}

.mind-map-node:hover::before {
  border-color: var(--primary, #4285F4);
  opacity: 0.5;
}

/* ===== DRAG HANDLE ===== */

.node-drag-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.2s ease;
  background-color: var(--bg-surface-2);
  border-radius: 4px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.node-drag-handle:hover {
  background-color: var(--bg-surface-3);
  color: var(--text-primary);
}

.node-drag-handle:active {
  cursor: grabbing;
  background-color: var(--primary-light);
  color: var(--primary);
}

.mind-map-node:hover .node-drag-handle {
  opacity: 1;
}

.mind-map-node.selected .node-drag-handle {
  opacity: 1;
}

/* ===== NODE CONTENT LAYOUT ===== */

.node-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 32px;
}

.mind-map-node.selected {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3); }
  100% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
}

.node-actions {
  animation: slideDown 0.2s ease-out;
}

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

.node-actions button:hover {
  background-color: var(--bg-surface-3);
  transform: scale(1.05);
}

/* Status indicators are now defined above in the header section */
.document-library {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.document-library-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.document-library-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.document-library-controls {
  display: flex;
  gap: 10px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  width: 200px;
}

.add-document-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
}

.add-document-btn:hover {
  background-color: var(--primary-color-dark);
}

.document-library-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.document-library-sidebar {
  width: 220px;
  border-right: 1px solid var(--border-color);
  padding: 16px;
  overflow-y: auto;
  background-color: var(--bg-surface-1);
}

.filter-section,
.categories-section {
  margin-bottom: 24px;
}

.filter-section h3,
.categories-section h3 {
  font-size: 14px;
  margin: 0 0 8px 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.categories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.add-category-btn {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.add-category-btn:hover {
  background-color: var(--bg-surface-2);
}

.add-category-form {
  display: flex;
  margin-bottom: 12px;
  gap: 8px;
}

.add-category-form input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
}

.add-category-form button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

.filter-list,
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-list li,
.category-list li {
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.filter-list li:hover,
.category-list li:hover {
  background-color: var(--bg-surface-2);
}

.filter-list li.active,
.category-list li.active {
  background-color: var(--bg-selected);
  color: var(--primary-color);
}

.category-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 8px;
}

.category-name {
  flex: 1;
}

.delete-category-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

.category-list li:hover .delete-category-btn {
  opacity: 1;
}

.delete-category-btn:hover {
  color: var(--bg-danger);
}

.document-list-container {
  flex: 1;
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  background-color: var(--bg-surface-1);
}

.document-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.document-item {
  padding: 16px;
  border-bottom: 1px solid var(--border-color-light);
  cursor: pointer;
  transition: background-color 0.2s;
}

.document-item:hover {
  background-color: var(--bg-surface-2);
}

.document-item.selected {
  background-color: var(--bg-selected);
}

.document-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.document-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.star-button {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
}

.star-button.starred {
  color: #FBBC05;
}

.document-description {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.document-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.document-category {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.document-date {
  font-size: 12px;
  color: var(--text-tertiary);
}

.document-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.document-tag {
  font-size: 12px;
  color: var(--text-secondary);
}

.document-detail-container {
  flex: 1.5;
  padding: 20px;
  overflow-y: auto;
  background-color: var(--bg-surface-1);
}

.document-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.document-detail-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.document-actions {
  display: flex;
  gap: 8px;
}

.edit-document-btn,
.delete-document-btn {
  background: none;
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.edit-document-btn {
  color: var(--text-secondary);
}

.delete-document-btn {
  color: var(--bg-danger);
}

.document-meta-detail {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color-light);
}

.document-meta-detail p {
  margin: 4px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.category-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.document-content {
  margin-bottom: 20px;
  line-height: 1.5;
}

.document-tags-detail {
  margin-top: 20px;
}

.document-tags-detail h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
}

.document-edit-form {
  padding: 0 0 20px 0;
}

.document-edit-form h3 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cancel-btn {
  background: none;
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}

.save-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.empty-state,
.document-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
  text-align: center;
}

.empty-state p,
.document-detail-empty p {
  margin: 0 0 16px 0;
  font-size: 16px;
}

.empty-state button,
.document-detail-empty button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Dark theme adjustments */
.document-library.dark .search-input,
.document-library.dark .form-group input[type="text"],
.document-library.dark .form-group textarea,
.document-library.dark .form-group select,
.document-library.dark .add-category-form input {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}
/* Custom Dropdown Component - Theme-consistent styling */

.custom-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  background: var(--bg-medium, #2a2a2a);
  border: 1px solid var(--border-color, #404040);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, #ffffff);
  font-size: var(--font-size-sm, 14px);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dropdown-trigger:hover:not(:disabled) {
  border-color: var(--primary, #007acc);
  background: var(--bg-light, #333333);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dropdown-trigger:focus {
  outline: none;
  border-color: var(--primary, #007acc);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 122, 204), 0.2);
}

.dropdown-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-darker, #1a1a1a);
}

.dropdown-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  flex: 1;
  min-width: 0;
}

.dropdown-icon {
  display: flex;
  align-items: center;
  color: var(--text-secondary, #cccccc);
  flex-shrink: 0;
}

.dropdown-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary, #ffffff);
}

.dropdown-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-secondary, #cccccc);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.dropdown-chevron.rotated {
  transform: rotate(180deg);
}

.custom-dropdown.open .dropdown-trigger {
  border-color: var(--primary, #007acc);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 122, 204), 0.2);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-darker, #1a1a1a);
  border: 1px solid var(--border-color, #404040);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.2));
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
  backdrop-filter: blur(8px);
  animation: dropdownFadeIn 0.15s ease-out;
}

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

.dropdown-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary, #ffffff);
  font-size: var(--font-size-sm, 14px);
  border-bottom: 1px solid var(--border-color-light, #2a2a2a);
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option:hover,
.dropdown-option.highlighted {
  background: var(--primary-light, rgba(0, 122, 204, 0.1));
  color: var(--primary, #007acc);
}

.dropdown-option.selected {
  background: var(--primary, #007acc);
  color: var(--text-on-primary, #ffffff);
}

.dropdown-option.selected:hover {
  background: var(--primary-dark, #005a9e);
}

.option-icon {
  display: flex;
  align-items: center;
  color: inherit;
  flex-shrink: 0;
}

.option-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrollbar styling for dropdown menu */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
  background: var(--bg-medium, #2a2a2a);
  border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--border-color, #404040);
  border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, #cccccc);
}

/* Focus states for accessibility */
.dropdown-trigger:focus-visible {
  outline: 2px solid var(--primary, #007acc);
  outline-offset: 2px;
}

/* Dark theme adjustments */
.custom-dropdown.dark .dropdown-trigger {
  background: var(--bg-darker, #1a1a1a);
  border-color: var(--border-color, #333333);
  color: var(--text-primary, #ffffff);
}

.custom-dropdown.dark .dropdown-trigger:hover {
  background: var(--bg-hover, #2a2a2a);
  border-color: var(--border-color, #444444);
}

.custom-dropdown.dark .dropdown-menu {
  background: var(--bg-darkest, #0f0f0f);
  border-color: var(--border-color, #333333);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.custom-dropdown.dark .dropdown-option {
  color: var(--text-primary, #ffffff);
  border-bottom-color: var(--border-color-light, #2a2a2a);
}

.custom-dropdown.dark .dropdown-option:hover {
  background: var(--bg-hover, #2a2a2a);
  color: var(--text-primary, #ffffff);
}

/* Light theme adjustments */
.custom-dropdown.light .dropdown-trigger {
  background: var(--bg-light, #ffffff);
  border-color: var(--border-color, #e0e0e0);
  color: var(--text-primary, #000000);
}

.custom-dropdown.light .dropdown-menu {
  background: var(--bg-light, #ffffff);
  border-color: var(--border-color, #e0e0e0);
}

.custom-dropdown.light .dropdown-option {
  color: var(--text-primary, #000000);
  border-bottom-color: var(--border-color-light, #f0f0f0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dropdown-menu {
    max-height: 200px;
  }
  
  .dropdown-option {
    padding: var(--space-md, 12px);
    font-size: var(--font-size-base, 16px);
  }
}
/* Enhanced Organize Components - Improved UX Styling */

/* ===== ENHANCED ORGANIZE DASHBOARD STYLES ===== */
.enhanced-organize-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Light mode support for organize dashboard */
:root[data-theme="light"] .enhanced-organize-dashboard {
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #1a1a1a);
}

/* Dashboard Header */
.organize-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  position: sticky;
  top: 0;
  z-index: var(--z-index-tabs);
}

:root[data-theme="light"] .organize-header {
  background: var(--bg-surface, #f8f8fa);
  border-bottom-color: var(--border-color, #e0e0e6);
}

/* Light mode title styling */
:root[data-theme="light"] .organize-title h2 {
  background: linear-gradient(135deg, #1a1a1a 0%, var(--primary, #ff7b00) 50%, #e56b00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-theme="light"] .organize-title h2::after {
  background: linear-gradient(135deg, rgba(255, 123, 0, 0.3) 0%, rgba(229, 107, 0, 0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Light mode project name */
:root[data-theme="light"] .project-name {
  background: linear-gradient(135deg, var(--primary, #ff7b00) 0%, #e56b00 100%);
  color: #ffffff;
  box-shadow:
    0 4px 15px rgba(255, 123, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Light mode view controls */
:root[data-theme="light"] .current-view {
  background: var(--bg-surface, #f8f8fa);
  border-color: var(--border-color, #e0e0e6);
  color: var(--text-primary, #1a1a1a);
}

:root[data-theme="light"] .current-view:hover {
  background: var(--bg-hover, #f3f4f6);
  border-color: var(--primary, #ff7b00);
}

:root[data-theme="light"] .view-mode-dropdown {
  background: var(--bg-surface, #ffffff);
  border-color: var(--border-color, #e0e0e6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .view-mode-option {
  color: var(--text-primary, #1a1a1a);
}

:root[data-theme="light"] .view-mode-option:hover {
  background: var(--bg-hover, #f3f4f6);
}

:root[data-theme="light"] .view-mode-option.active {
  background: var(--primary, #ff7b00);
  color: #ffffff;
}

:root[data-theme="light"] .filter-toggle {
  background: var(--bg-surface, #f8f8fa);
  border-color: var(--border-color, #e0e0e6);
  color: var(--text-primary, #1a1a1a);
}

/* Light mode filters panel */
:root[data-theme="light"] .filters-panel {
  background: var(--bg-surface, #ffffff);
  border-color: var(--border-color, #e0e0e6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .filter-group label {
  color: var(--text-primary, #1a1a1a);
}

:root[data-theme="light"] .filter-group select {
  background: var(--bg-surface, #f8f8fa);
  border-color: var(--border-color, #e0e0e6);
  color: var(--text-primary, #1a1a1a);
}

/* Light mode tabs */
:root[data-theme="light"] .organize-tabs {
  background: var(--bg-surface, #f8f8fa);
  border-bottom-color: var(--border-color, #e0e0e6);
}

:root[data-theme="light"] .organize-tab {
  color: var(--text-secondary, #6b7280);
}

:root[data-theme="light"] .organize-tab:hover {
  color: var(--text-primary, #1a1a1a);
  background: var(--bg-hover, #f3f4f6);
}

:root[data-theme="light"] .organize-tab.active {
  color: var(--primary, #ff7b00);
  border-bottom-color: var(--primary, #ff7b00);
  background: var(--bg-hover, #f3f4f6);
}

/* Light mode content area */
:root[data-theme="light"] .organize-content {
  background: var(--bg-primary, #ffffff);
}

:root[data-theme="light"] .organize-loading {
  color: var(--text-secondary, #6b7280);
}

.organize-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.organize-title h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary, #f8f8f2) 0%, #a78bfa 50%, #4ecdc4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  letter-spacing: -0.02em;
  position: relative;
}

/* Add subtle glow effect */
.organize-title h2::after {
  content: 'Organize';
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(78, 205, 196, 0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: blur(8px);
  z-index: -1;
  opacity: 0.5;
}

.project-name {
  background:
    linear-gradient(135deg, var(--primary, #8b5cf6) 0%, var(--secondary, #06b6d4) 100%);
  color: white;
  padding: 10px 20px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow:
    0 4px 15px rgba(139, 92, 246, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Project name shimmer effect */
.project-name::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.project-name:hover::before {
  left: 100%;
}

.project-name:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow:
    0 8px 25px rgba(139, 92, 246, 0.4),
    0 4px 15px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.organize-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* View Mode Selector */
.view-mode-selector {
  position: relative;
  display: inline-block;
}

.current-view {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
}

.current-view:hover {
  background: var(--bg-light);
  border-color: var(--accent, var(--primary));
}

.view-mode-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: var(--z-index-modal);
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  min-width: 200px;
}

.view-mode-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.view-mode-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.view-mode-option:hover {
  background: var(--bg-light);
}

.view-mode-option.active {
  background: var(--accent, var(--primary));
  color: var(--text-on-primary);
}

.user-options {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-xs);
}

.user-options-label {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-option {
  padding-left: var(--space-lg);
}

.user-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}

/* Filter Controls */
.filter-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
}

.filter-toggle:hover,
.filter-toggle.active {
  background: var(--accent, var(--primary));
  border-color: var(--accent, var(--primary));
  color: var(--text-on-primary);
}

.filters-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: var(--z-index-modal);
  margin-top: 4px;
  padding: var(--space-md);
  min-width: 200px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.filter-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.filter-group select {
  padding: var(--space-sm);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

/* Tab Navigation */
.organize-tabs {
  display: flex;
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.organize-tabs::-webkit-scrollbar {
  display: none;
}

.organize-tab {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  min-width: fit-content;
}

.organize-tab:hover {
  color: var(--text-primary);
  background: var(--bg-light);
}

.organize-tab.active {
  color: var(--accent, var(--primary));
  border-bottom-color: var(--accent, var(--primary));
  background: var(--bg-light);
}

/* Content Area */
.organize-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.organize-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-md);
  color: var(--text-secondary);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--accent, var(--primary));
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.organize-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  text-align: center;
  padding: var(--space-xl);
}

/* ===== TODOS SPECIFIC STYLES ===== */
.user-organize-todos {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.todos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  position: sticky;
  top: 0;
  z-index: var(--z-index-content);
}

.todos-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.todos-title h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.todos-stats {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
}

.create-todo-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent, var(--primary));
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.2);
}

.create-todo-btn:hover {
  background: var(--accent-dark, var(--primary-dark));
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.3);
}

.todos-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  gap: var(--space-md);
}

.filter-buttons {
  display: flex;
  gap: var(--space-xs);
}

.filter-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.filter-btn:hover {
  background: var(--bg-light);
  color: var(--text-primary);
}

.filter-btn.active {
  background: var(--accent, var(--primary));
  border-color: var(--accent, var(--primary));
  color: var(--text-on-primary);
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sort-controls label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.sort-controls select {
  padding: var(--space-sm);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.todos-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-md);
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-md);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--space-xl);
}

.create-first-todo {
  padding: var(--space-sm) var(--space-md);
  background: var(--accent, var(--primary));
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-first-todo:hover {
  background: var(--accent-dark, var(--primary-dark));
  transform: translateY(-1px);
}

.todos-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  position: relative;
}

.todo-item:hover {
  border-color: var(--accent, var(--primary));
  box-shadow: 0 2px 8px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.1);
}

.todo-item.completed {
  opacity: 0.7;
  background: var(--bg-medium);
}

.todo-item.completed .todo-title {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.todo-checkbox {
  margin-top: var(--space-xs);
}

.todo-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, var(--primary));
  cursor: pointer;
}

.todo-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
}

.todo-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.4;
}

.todo-badges {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.priority-badge {
  display: flex;
  align-items: center;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.priority-badge.urgent { background: rgba(220, 53, 69, 0.2); color: #dc3545; }
.priority-badge.high { background: rgba(253, 126, 20, 0.2); color: #fd7e14; }
.priority-badge.medium { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.priority-badge.low { background: rgba(40, 167, 69, 0.2); color: #28a745; }

.todo-description {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.todo-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.due-date {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-medium);
  border-radius: var(--radius-sm);
}

.due-date.overdue {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

.category-tag {
  padding: var(--space-xs) var(--space-sm);
  background: var(--accent-light, var(--primary-light));
  color: var(--accent, var(--primary));
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.todo-creator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.todo-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.edit-btn,
.delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.delete-btn:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
}

/* Modal Styles for Todo Creation - Using centralized theme */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop-color);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  padding: var(--space-lg);
  transition: var(--modal-backdrop-transition);
}

.modal-content {
  background: var(--modal-background);
  color: var(--modal-text-color);
  border: 1px solid var(--modal-border-color);
  border-radius: var(--modal-border-radius);
  padding: var(--modal-body-padding);
  max-width: var(--modal-max-width-medium);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--modal-shadow);
  animation: modalEnter var(--modal-animation-duration) var(--modal-animation-easing);
}

.modal-content h3 {
  margin: 0 0 var(--space-lg) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-sm);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  transform: translateY(-1px);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  line-height: 1.5;
}

.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

.form-group select option {
  background: var(--bg-surface-2, #313244);
  color: var(--text-primary, #cdd6f4);
  font-weight: 500;
  padding: 8px 12px;
}

/* Light mode support for forms */
@media (prefers-color-scheme: light) {
  .form-group input,
  .form-group textarea,
  .form-group select {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1a1a1a;
  }

  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  }

  .form-group select option {
    background: #ffffff;
    color: #1a1a1a;
  }

  .form-group label {
    color: #1a1a1a;
  }
}

/* Enhanced Light mode support for Kanban Board */
@media (prefers-color-scheme: light) {
  .kanban-container {
    background:
      linear-gradient(135deg, rgba(248, 249, 250, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
  }

  .kanban-container::before {
    background:
      radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
  }

  .kanban-header {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
  }

  .kanban-title h3 {
    color: #1a1a1a;
  }

  .kanban-column {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow:
      0 4px 15px rgba(0, 0, 0, 0.08),
      0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .kanban-column:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.12),
      0 4px 15px rgba(139, 92, 246, 0.15);
  }

  .column-header {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }

  .column-header h4 {
    color: #1a1a1a;
  }

  .kanban-card {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.08),
      0 1px 4px rgba(0, 0, 0, 0.04);
  }

  .kanban-card:hover {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.12),
      0 3px 12px rgba(139, 92, 246, 0.15);
  }

  .card-title {
    color: #1a1a1a;
  }

  .card-description {
    color: #6b7280;
  }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

.cancel-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.cancel-btn:hover {
  background: var(--bg-light);
}

.create-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--accent, var(--primary));
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-on-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.create-btn:hover:not(:disabled) {
  background: var(--accent-dark, var(--primary-dark));
  transform: translateY(-1px);
}

.create-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ===== DOCUMENTS SPECIFIC STYLES ===== */
.user-organize-documents {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.documents-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  position: sticky;
  top: 0;
  z-index: 10;
}

.documents-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.documents-title h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.document-actions {
  display: flex;
  gap: var(--space-sm);
}

.upload-document-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent, var(--primary));
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.2);
}

.upload-document-btn:hover:not(:disabled) {
  background: var(--accent-dark, var(--primary-dark));
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.3);
}

.upload-document-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.documents-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  gap: var(--space-md);
}

.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  flex: 1;
  max-width: 400px;
}

.search-box svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  flex: 1;
  min-width: 0;
}

.search-input::placeholder {
  color: var(--text-secondary);
}

.filter-controls {
  display: flex;
  gap: var(--space-sm);
}

.category-filter {
  min-width: 160px;
}

.documents-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-md);
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.document-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.document-card:hover {
  border-color: var(--accent, var(--primary));
  box-shadow: 0 4px 12px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.1);
  transform: translateY(-2px);
}

.document-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.document-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-medium);
  border-radius: var(--radius-md);
  color: var(--accent, var(--primary));
}

.document-badges {
  display: flex;
  gap: var(--space-xs);
}

.privacy-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.privacy-badge.private { background: rgba(220, 53, 69, 0.2); color: #dc3545; }
.privacy-badge.team { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.privacy-badge.shared { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.privacy-badge.public { background: rgba(23, 162, 184, 0.2); color: #17a2b8; }

.document-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.document-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.document-category {
  padding: var(--space-xs) var(--space-sm);
  background: var(--accent-light, var(--primary-light));
  color: var(--accent, var(--primary));
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.document-size {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--bg-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.document-creator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.document-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.delete-btn:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
}

.create-first-document {
  padding: var(--space-sm) var(--space-md);
  background: var(--accent, var(--primary));
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-first-document:hover {
  background: var(--accent-dark, var(--primary-dark));
  transform: translateY(-1px);
}

/* ===== MIND MAPS SPECIFIC STYLES ===== */
.user-organize-mindmaps {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.mindmaps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mindmaps-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mindmaps-title h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.view-mode-indicator {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
}

.create-mindmap-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent, var(--primary));
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.2);
}

.create-mindmap-btn:hover {
  background: var(--accent-dark, var(--primary-dark));
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.3);
}

.mindmaps-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin: var(--space-md) var(--space-lg);
  max-width: 400px;
}

.mindmaps-search svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mindmaps-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-md);
}

.mindmaps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.mindmap-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.mindmap-card:hover {
  border-color: var(--accent, var(--primary));
  box-shadow: 0 8px 24px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.15);
  transform: translateY(-4px);
}

.mindmap-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-md);
  background: var(--bg-medium);
  border-bottom: 1px solid var(--border-color);
}

.mindmap-badges {
  display: flex;
  gap: var(--space-xs);
}

.mindmap-actions {
  display: flex;
  gap: var(--space-xs);
}

.mindmap-preview {
  height: 200px;
  background: var(--bg-darkest);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}

.mindmap-preview-svg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-darkest) 0%, var(--bg-darker) 100%);
}

.mindmap-info {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.mindmap-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.4;
}

.mindmap-meta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.node-count,
.connection-count {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--bg-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.node-count::before {
  content: "●";
  color: var(--accent, var(--primary));
}

.connection-count::before {
  content: "⟷";
  color: var(--accent, var(--primary));
}

.mindmap-creator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border-color);
}

.create-first-mindmap {
  padding: var(--space-sm) var(--space-md);
  background: var(--accent, var(--primary));
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-first-mindmap:hover {
  background: var(--accent-dark, var(--primary-dark));
  transform: translateY(-1px);
}

/* Mind Map SVG Enhancements */
.mindmap-preview-svg circle,
.mindmap-preview-svg rect,
.mindmap-preview-svg polygon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: all 0.2s ease;
}

.mindmap-preview:hover .mindmap-preview-svg circle,
.mindmap-preview:hover .mindmap-preview-svg rect,
.mindmap-preview:hover .mindmap-preview-svg polygon {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.mindmap-preview-svg text {
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-weight: var(--font-weight-medium);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mindmap-preview-svg line {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* ===== MEETING NOTES SPECIFIC STYLES ===== */
.user-organize-meeting-notes {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.meeting-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  position: sticky;
  top: 0;
  z-index: 10;
}

.meeting-notes-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.meeting-notes-title h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.meeting-notes-stats {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
}

.meeting-notes-controls {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
}

.meeting-notes-list {
  flex: 1;
  overflow: auto;
  padding: var(--space-md);
}

.meeting-note-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: all 0.2s ease;
  position: relative;
}

.meeting-note-card:hover {
  border-color: var(--accent, var(--primary));
  box-shadow: 0 4px 12px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.1);
  transform: translateY(-2px);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.note-info h4 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.channel-name,
.recording-date,
.duration,
.participants {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.channel-name {
  background: rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.1);
  color: var(--accent, var(--primary));
}

.note-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--accent, var(--primary));
  border-color: var(--accent, var(--primary));
  color: var(--text-on-primary);
  transform: translateY(-1px);
}

.action-btn.delete-btn:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
}

.note-description {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-medium);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent, var(--primary));
}

.note-description p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.transcript-preview {
  background: var(--bg-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.transcript-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.transcript-snippet {
  padding: var(--space-md);
}

.transcript-line {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.transcript-line strong {
  color: var(--accent, var(--primary));
  font-weight: var(--font-weight-semibold);
}

.transcript-more {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
}

/* Transcript Modal - Using centralized theme */
.transcript-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop-color);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  padding: var(--space-lg);
  transition: var(--modal-backdrop-transition);
}

.transcript-modal {
  background: var(--modal-background);
  color: var(--modal-text-color);
  border: 1px solid var(--modal-border-color);
  border-radius: var(--modal-border-radius);
  max-width: var(--modal-max-width-large);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--modal-shadow);
  animation: modalEnter var(--modal-animation-duration) var(--modal-animation-easing);
}

.transcript-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-medium);
}

.transcript-modal .modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.close-btn:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
}

.transcript-modal .modal-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-lg);
}

.transcript-full {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.transcript-segment {
  background: var(--bg-medium);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border-left: 3px solid var(--accent, var(--primary));
}

.segment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.segment-header strong {
  color: var(--accent, var(--primary));
  font-weight: var(--font-weight-semibold);
}

.segment-time {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--bg-light);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.segment-content {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--text-primary);
}

/* ===== COMMON STYLES ===== */
.user-organize-documents,
.user-organize-kanban,
.user-organize-calendar,
.user-organize-mindmaps {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Headers */
.documents-header,
.kanban-header,
.calendar-header,
.mindmaps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  position: sticky;
  top: 0;
  z-index: 10;
}

.documents-title,
.kanban-title,
.calendar-title,
.mindmaps-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.documents-title h3,
.kanban-title h3,
.calendar-title h3,
.mindmaps-title h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.view-mode-indicator {
  background: var(--primary-light);
  color: var(--primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Action Buttons */
.upload-document-btn,
.create-card-btn,
.create-event-btn,
.create-mindmap-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--primary);
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(var(--primary-rgb, 0, 122, 204), 0.2);
}

.upload-document-btn:hover:not(:disabled),
.create-card-btn:hover:not(:disabled),
.create-event-btn:hover:not(:disabled),
.create-mindmap-btn:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--primary-rgb, 0, 122, 204), 0.3);
}

.upload-document-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Controls */
.documents-controls,
.mindmaps-search {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box .w-4 {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 122, 204), 0.2);
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.category-filter {
  min-width: 200px;
}

/* Content Areas */
.documents-content,
.kanban-content,
.mindmaps-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-darkest);
}

.calendar-content {
  flex: 1;
  overflow: auto;
  padding: 0;
  background: var(--bg-darkest);
}

/* ===== COMPLETELY REDESIGNED KANBAN STYLES ===== */

/* Modern Kanban Container */
.kanban-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.98) 0%, rgba(30, 30, 46, 0.98) 100%);
  position: relative;
  overflow: hidden;
  /* Entrance animation */
  animation: kanbanContainerSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes kanbanContainerSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated background pattern */
.kanban-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: kanbanBackgroundShift 12s ease-in-out infinite;
}

@keyframes kanbanBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.kanban-container > * {
  position: relative;
  z-index: 1;
}

/* Enhanced Kanban Header */
.kanban-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  /* Header entrance animation */
  animation: kanbanHeaderSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

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

/* Header background pattern */
.kanban-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.kanban-header > * {
  position: relative;
  z-index: 1;
}

.kanban-title {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Title entrance animation */
  animation: kanbanTitleSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

@keyframes kanbanTitleSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.kanban-title h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.view-mode-indicator {
  background: var(--bg-medium);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-left: var(--space-sm);
}

.create-card-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--primary);
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-card-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.kanban-columns {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  padding: 24px;
  background: transparent;
  min-height: 0;
  /* Kanban columns entrance animation */
  animation: kanbanColumnsSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

@keyframes kanbanColumnsSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.kanban-columns::-webkit-scrollbar {
  height: 8px;
}

.kanban-columns::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-columns::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.kanban-columns::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.kanban-column {
  min-width: 320px;
  max-width: 320px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: fit-content;
  max-height: calc(100vh - 200px);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  /* Staggered column animation */
  animation: kanbanColumnSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.kanban-column:nth-child(1) { animation-delay: 0.1s; }
.kanban-column:nth-child(2) { animation-delay: 0.2s; }
.kanban-column:nth-child(3) { animation-delay: 0.3s; }
.kanban-column:nth-child(4) { animation-delay: 0.4s; }
.kanban-column:nth-child(5) { animation-delay: 0.5s; }

@keyframes kanbanColumnSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kanban-column:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.15),
    0 6px 20px rgba(139, 92, 246, 0.2);
  transform: translateY(-2px) scale(1.01);
}

.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(10px);
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  /* Header entrance animation */
  animation: columnHeaderSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

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

/* Header background pattern */
.column-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.column-header > * {
  position: relative;
  z-index: 1;
}

.column-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #f8f8f2);
  /* Title entrance animation */
  animation: columnTitleSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

@keyframes columnTitleSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.card-count {
  background: var(--primary);
  color: var(--text-on-primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  min-width: 24px;
  text-align: center;
}

.column-cards {
  flex: 1;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-light) transparent;
}

.column-cards::-webkit-scrollbar {
  width: 4px;
}

.column-cards::-webkit-scrollbar-track {
  background: transparent;
}

.column-cards::-webkit-scrollbar-thumb {
  background: var(--bg-light);
  border-radius: var(--radius-sm);
}

.column-cards::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

.column-cards.drag-over {
  background: var(--primary-light);
  border-radius: var(--radius-md);
}

.kanban-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  cursor: grab;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  color: var(--text-primary, #f8f8f2);
  /* Card entrance animation */
  animation: kanbanCardSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes kanbanCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kanban-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, var(--primary, #8b5cf6) 0%, var(--secondary, #06b6d4) 100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 4px 4px 0;
}

.kanban-card:hover::before,
.kanban-card.dragging::before {
  opacity: 1;
  width: 6px;
}

.kanban-card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 15px rgba(139, 92, 246, 0.2);
  transform: translateY(-4px) scale(1.02);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.kanban-card.dragging {
  opacity: 0.95 !important;
  transform: rotate(2deg) scale(1.05) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.25),
    0 8px 25px rgba(139, 92, 246, 0.4) !important;
  z-index: 1000 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  backdrop-filter: blur(25px) !important;
}

/* Ensure dragged cards remain visible */
.kanban-card[data-rbd-drag-handle-draggable-id] {
  opacity: 1 !important;
  visibility: visible !important;
}

.kanban-card[data-rbd-draggable-id] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix for react-beautiful-dnd dragging state */
.kanban-card[data-rbd-draggable-id][style*="transform"] {
  opacity: 0.95 !important;
  visibility: visible !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.25),
    0 8px 25px rgba(139, 92, 246, 0.4) !important;
}

.kanban-card.dragging {
  cursor: grabbing;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
  z-index: 1000;
}

.kanban-card:active {
  cursor: grabbing;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.card-priority {
  display: flex;
  align-items: center;
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--space-xs);
}

.priority-urgent { background: #dc3545; }
.priority-high { background: #fd7e14; }
.priority-medium { background: #ffc107; }
.priority-low { background: #28a745; }

.card-badges {
  display: flex;
  gap: var(--space-xs);
}

.privacy-badge {
  display: flex;
  align-items: center;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.privacy-badge.private { background: rgba(220, 53, 69, 0.2); color: #dc3545; }
.privacy-badge.team { background: rgba(var(--primary-rgb), 0.2); color: var(--primary); }
.privacy-badge.shared { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.privacy-badge.public { background: rgba(255, 193, 7, 0.2); color: #ffc107; }

.card-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary, #f8f8f2);
  /* Title entrance animation */
  animation: cardTitleSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

@keyframes cardTitleSlideIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-secondary, #a6adc8);
  line-height: 1.5;
  font-weight: 500;
  /* Description entrance animation */
  animation: cardDescriptionSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

@keyframes cardDescriptionSlideIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.card-creator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.status-select {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.status-select:hover {
  border-color: var(--primary);
}

/* Loading state */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
}

.empty-column {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
}

/* ===== CALENDAR VIEW COMPONENT STYLES ===== */
.calendar-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.calendar-view .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border-color);
}

.calendar-view .calendar-header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  text-align: center;
  flex: 1;
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.month-nav:hover {
  background: var(--accent, var(--primary));
  border-color: var(--accent, var(--primary));
  color: var(--text-on-primary);
  transform: translateY(-1px);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto 1fr;
  flex: 1;
  background: var(--bg-darker);
  margin: var(--space-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--bg-medium);
  border-right: 1px solid var(--border-color);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weekday:last-child {
  border-right: none;
}

.day {
  min-height: 120px;
  padding: var(--space-sm);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--bg-darkest);
}

.day:last-child {
  border-right: none;
}

.day:hover {
  background: var(--bg-light);
}

.day.has-day {
  background: var(--bg-darkest);
}

.day.empty-day {
  background: var(--bg-darker);
  cursor: default;
}

.day-number {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.event {
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: white;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.calendar-footer {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-darker);
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.calendar-footer p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ===== CALENDAR SPECIFIC STYLES ===== */
.calendar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-left: auto;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
}

.month-year {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  min-width: 200px;
  text-align: center;
}

.calendar-grid {
  display: flex;
  flex-direction: column;
  background: var(--bg-darker);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: var(--space-lg);
}

.weekday-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-medium);
  border-bottom: 2px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 5;
}

.weekday {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--border-color);
}

.weekday:last-child {
  border-right: none;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(140px, auto);
}

.calendar-day {
  min-height: 140px;
  padding: var(--space-md);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--bg-darkest);
}

.calendar-day:last-child {
  border-right: none;
}

.calendar-day:hover {
  background: var(--bg-light);
}

.calendar-day.today {
  background: var(--primary-light);
}

.calendar-day.selected {
  background: var(--primary);
  color: var(--text-on-primary);
}

.calendar-day.other-month {
  color: var(--text-tertiary);
  background: var(--bg-darkest);
}

.calendar-day.has-events .day-number {
  font-weight: var(--font-weight-bold);
}

.day-number {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
  text-align: left;
  line-height: 1;
}

.day-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-dot {
  background: var(--primary);
  color: var(--text-on-primary);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-events {
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
}

.selected-date-events {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-darker);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.selected-date-events h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.event-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.event-item:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 0, 122, 204), 0.15);
}

.event-time {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  min-width: 120px;
}

.event-details {
  flex: 1;
}

.event-details h5 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.event-location {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.event-badges {
  display: flex;
  gap: var(--space-xs);
}

/* ===== MIND MAPS SPECIFIC STYLES ===== */
.mindmaps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-md);
}

.mindmap-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mindmap-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb, 0, 122, 204), 0.15);
  transform: translateY(-2px);
}

.mindmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-medium);
  border-bottom: 1px solid var(--border-color);
}

.mindmap-badges {
  display: flex;
  gap: var(--space-xs);
}

.mindmap-actions {
  display: flex;
  gap: var(--space-xs);
}

.mindmap-preview {
  height: 200px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mindmap-preview-svg {
  width: 100%;
  height: 100%;
}

.mindmap-info {
  padding: var(--space-md);
}

.mindmap-title {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.mindmap-meta {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.mindmap-creator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* ===== DOCUMENTS SPECIFIC STYLES ===== */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-md);
}

.document-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 200px;
}

.document-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb, 0, 122, 204), 0.15);
  transform: translateY(-2px);
}

.document-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-medium);
  border-bottom: 1px solid var(--border-color);
}

.document-icon {
  display: flex;
  align-items: center;
  color: var(--primary);
}

.document-badges {
  display: flex;
  gap: var(--space-xs);
}

.document-content {
  flex: 1;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}

.document-title {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.document-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.document-category {
  background: var(--primary-light);
  color: var(--primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
}

.document-creator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: auto;
}

.document-actions {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-top: 1px solid var(--border-color);
  background: var(--bg-medium);
}

/* ===== SHARED STYLES ===== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-secondary);
  gap: var(--space-md);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-secondary);
  text-align: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--bg-medium);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  margin: var(--space-lg);
  transition: all 0.3s ease;
}

.empty-state:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.empty-state h4 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.empty-state p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.create-first-document,
.create-first-event,
.create-first-mindmap {
  padding: var(--space-sm) var(--space-lg);
  background: var(--primary);
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-first-document:hover,
.create-first-event:hover,
.create-first-mindmap:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* ===== MODAL STYLES - Using centralized theme ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop-color);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  transition: var(--modal-backdrop-transition);
}

.modal-content {
  background: var(--modal-background);
  color: var(--modal-text-color);
  border: 1px solid var(--modal-border-color);
  border-radius: var(--modal-border-radius);
  padding: var(--modal-body-padding);
  max-width: var(--modal-max-width-medium);
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--modal-shadow);
  animation: modalEnter var(--modal-animation-duration) var(--modal-animation-easing);
}

.modal-content h3 {
  margin: 0 0 var(--space-lg) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-sm);
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 122, 204), 0.2);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

.cancel-btn,
.create-btn {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: transparent;
  color: var(--text-secondary);
}

.cancel-btn:hover {
  background: var(--bg-medium);
  color: var(--text-primary);
}

.create-btn {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.create-btn:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .documents-grid,
  .mindmaps-grid {
    grid-template-columns: 1fr;
  }

  .kanban-columns {
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .kanban-column {
    min-width: auto;
    max-width: none;
    width: 100%;
  }

  .calendar-days {
    grid-template-columns: repeat(7, 1fr);
  }

  .calendar-day {
    min-height: 100px;
    padding: var(--space-sm);
  }

  .weekday {
    padding: var(--space-md) var(--space-sm);
    font-size: var(--font-size-xs);
  }

  .calendar-grid {
    margin: var(--space-md);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .modal-content {
    width: 95%;
    padding: var(--space-lg);
  }

  /* Maps responsive */
  .maps-content {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .map-container {
    min-height: 300px;
  }

  .maps-sidebar {
    max-height: 300px;
  }

  .maps-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .search-box {
    min-width: auto;
  }
}

/* ===== MAPS SPECIFIC STYLES ===== */
.user-organize-maps {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.maps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
  position: sticky;
  top: 0;
  z-index: 10;
}

.maps-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.maps-title h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.maps-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.maps-content {
  flex: 1;
  display: flex;
  gap: var(--space-md);
  overflow: hidden;
  padding: var(--space-md);
}

.map-container {
  flex: 2;
  position: relative;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 400px;
}

.map-display {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* MapLibre GL styles integration */
.map-display .maplibregl-map {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

.map-display .maplibregl-ctrl-group {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.map-display .maplibregl-ctrl-group button {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border: none;
}

.map-display .maplibregl-ctrl-group button:hover {
  background: var(--bg-surface-3);
}

.map-display .maplibregl-popup-content {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

.map-display .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: var(--bg-surface-1);
}

.map-display .maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: var(--bg-surface-1);
}

.map-display .maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--bg-surface-1);
}

.map-display .maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--bg-surface-1);
}

/* Map loading and error states */
.map-loading, .map-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-1);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}

.map-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-md);
}

.map-error .retry-btn {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-error .retry-btn:hover {
  background: var(--primary-hover);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Real MapLibre GL Map - No Mock/Preview Code */

.maps-sidebar {
  flex: 1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Collapsible Locations Header */
.locations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  position: relative;
  overflow: hidden;
}

.locations-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.locations-header:hover::before {
  left: 100%;
}

.locations-header:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.locations-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.locations-header svg {
  color: var(--text-secondary);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.locations-list {
  flex: 1;
  overflow: auto;
  padding: var(--space-md);
}

.locations-list h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.location-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.location-item {
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: all 0.2s ease;
  cursor: pointer;
}

.location-item:hover {
  border-color: var(--accent, var(--primary));
  box-shadow: 0 2px 8px rgba(var(--accent-rgb, var(--primary-rgb, 0, 122, 204)), 0.1);
  transform: translateY(-1px);
}

.location-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.location-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.category-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== COMPREHENSIVE LIGHT MODE SUPPORT ===== */

/* Light mode cards and panels */
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .widget {
  background: var(--bg-surface, #ffffff);
  border-color: var(--border-color, #e0e0e6);
  color: var(--text-primary, #1a1a1a);
}

/* Light mode buttons */
:root[data-theme="light"] .btn {
  color: var(--text-primary, #1a1a1a);
}

:root[data-theme="light"] .btn-primary {
  background: var(--primary, #ff7b00);
  color: #ffffff;
}

:root[data-theme="light"] .btn-secondary {
  background: var(--bg-surface, #f8f8fa);
  border-color: var(--border-color, #e0e0e6);
  color: var(--text-primary, #1a1a1a);
}

/* Light mode text elements */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6 {
  color: var(--text-primary, #1a1a1a);
}

:root[data-theme="light"] p,
:root[data-theme="light"] span,
:root[data-theme="light"] div {
  color: var(--text-primary, #1a1a1a);
}

/* Light mode loading spinner */
:root[data-theme="light"] .loading-spinner {
  border-color: var(--border-color, #e0e0e6);
  border-top-color: var(--primary, #ff7b00);
}

/* Light mode location info */
:root[data-theme="light"] .location-info {
  color: var(--text-secondary, #6b7280);
}

.location-info h5 {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.location-description {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.location-address {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.location-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
}

.category {
  background: var(--accent-light, var(--primary-light));
  color: var(--accent, var(--primary));
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.coordinates {
  color: var(--text-secondary);
  font-family: monospace;
}
/* CategorySelector Styles */

._categorySelector_1a9lp_3 {
  position: relative;
  width: 100%;
}

._categorySelector_1a9lp_3._disabled_1a9lp_8 {
  opacity: 0.6;
  pointer-events: none;
}

/* Size variants */
._categorySelector_1a9lp_3._small_1a9lp_14 {
  font-size: 0.875rem;
}

._categorySelector_1a9lp_3._medium_1a9lp_18 {
  font-size: 1rem;
}

._categorySelector_1a9lp_3._large_1a9lp_22 {
  font-size: 1.125rem;
}

/* Selector trigger */
._selectorTrigger_1a9lp_27 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  background: var(--background-color, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 40px;
}

._selectorTrigger_1a9lp_27:hover {
  border-color: var(--border-hover-color, #cbd5e1);
}

._selectorTrigger_1a9lp_27._open_1a9lp_44 {
  border-color: var(--primary-color, #6366f1);
  box-shadow: 0 0 0 3px var(--primary-color-alpha, rgba(99, 102, 241, 0.1));
}

._selectedDisplay_1a9lp_49 {
  flex: 1;
  min-width: 0;
}

._placeholder_1a9lp_54 {
  color: var(--text-muted-color, #64748b);
}

._selectedTags_1a9lp_58 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

._selectedTag_1a9lp_58 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--primary-color-light, #e0e7ff);
  color: var(--primary-color-dark, #3730a3);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

._removeTag_1a9lp_76 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

._removeTag_1a9lp_76:hover {
  background: var(--primary-color-alpha, rgba(99, 102, 241, 0.2));
}

._selectorActions_1a9lp_93 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

._clearButton_1a9lp_100 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted-color, #64748b);
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  transition: all 0.2s ease;
}

._clearButton_1a9lp_100:hover {
  color: var(--text-color, #1e293b);
  background: var(--background-hover-color, #f1f5f9);
}

._chevron_1a9lp_118 {
  color: var(--text-muted-color, #64748b);
  transition: transform 0.2s ease;
}

._chevron_1a9lp_118._rotated_1a9lp_123 {
  transform: rotate(180deg);
}

/* Dropdown */
._dropdown_1a9lp_128 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  margin-top: 4px;
  max-height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Search */
._searchContainer_1a9lp_146 {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

._searchIcon_1a9lp_152 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted-color, #64748b);
}

._searchInput_1a9lp_160 {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 4px;
  background: var(--background-color, #ffffff);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease;
}

._searchInput_1a9lp_160:focus {
  border-color: var(--primary-color, #6366f1);
}

/* Categories list */
._categoriesList_1a9lp_176 {
  flex: 1;
  overflow-y: auto;
  max-height: 240px;
}

._categoryItem_1a9lp_182 {
  border-bottom: 1px solid var(--border-light-color, #f1f5f9);
}

._categoryItem_1a9lp_182:last-child {
  border-bottom: none;
}

._categoryRow_1a9lp_190 {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

._categoryRow_1a9lp_190:hover {
  background: var(--background-hover-color, #f8fafc);
}

._categoryRow_1a9lp_190._selected_1a9lp_49 {
  background: var(--primary-color-light, #e0e7ff);
}

._expandButton_1a9lp_206 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted-color, #64748b);
  cursor: pointer;
  padding: 2px;
  margin-right: 4px;
  border-radius: 2px;
  transition: all 0.2s ease;
}

._expandButton_1a9lp_206:hover {
  background: var(--background-hover-color, #f1f5f9);
  color: var(--text-color, #1e293b);
}

._categoryContent_1a9lp_225 {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

._categoryIcon_1a9lp_232 {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

._categoryInfo_1a9lp_241 {
  flex: 1;
  min-width: 0;
}

._categoryName_1a9lp_246 {
  font-weight: 500;
  color: var(--text-color, #1e293b);
  display: block;
}

._categoryDescription_1a9lp_252 {
  font-size: 0.75rem;
  color: var(--text-muted-color, #64748b);
  display: block;
  margin-top: 2px;
}

._selectedIndicator_1a9lp_259 {
  color: var(--primary-color, #6366f1);
  display: flex;
  align-items: center;
}

._childCategories_1a9lp_265 {
  background: var(--background-light-color, #f8fafc);
}

/* States */
._loading_1a9lp_270, ._empty_1a9lp_270 {
  padding: 16px;
  text-align: center;
  color: var(--text-muted-color, #64748b);
  font-size: 0.875rem;
}

._selectionLimit_1a9lp_277 {
  padding: 8px 12px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  background: var(--background-light-color, #f8fafc);
  font-size: 0.75rem;
  color: var(--text-muted-color, #64748b);
  text-align: center;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  ._categorySelector_1a9lp_3 {
    --background-color: #1e293b;
    --background-hover-color: #334155;
    --background-light-color: #0f172a;
    --border-color: #334155;
    --border-hover-color: #475569;
    --border-light-color: #334155;
    --text-color: #f1f5f9;
    --text-muted-color: #94a3b8;
    --primary-color: #818cf8;
    --primary-color-light: rgba(129, 140, 248, 0.1);
    --primary-color-dark: #a5b4fc;
    --primary-color-alpha: rgba(129, 140, 248, 0.1);
  }
}
/* TagInput Styles */

._tagInput_jfsxe_3 {
  position: relative;
  width: 100%;
}

._tagInput_jfsxe_3._disabled_jfsxe_8 {
  opacity: 0.6;
  pointer-events: none;
}

/* Size variants */
._tagInput_jfsxe_3._small_jfsxe_14 {
  font-size: 0.875rem;
}

._tagInput_jfsxe_3._medium_jfsxe_18 {
  font-size: 1rem;
}

._tagInput_jfsxe_3._large_jfsxe_22 {
  font-size: 1.125rem;
}

/* Tag container */
._tagContainer_jfsxe_27 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  background: var(--background-color, #ffffff);
  min-height: 40px;
  transition: border-color 0.2s ease;
}

._tagContainer_jfsxe_27:focus-within {
  border-color: var(--primary-color, #6366f1);
  box-shadow: 0 0 0 3px var(--primary-color-alpha, rgba(99, 102, 241, 0.1));
}

._tagsList_jfsxe_45 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Individual tags */
._tag_jfsxe_3 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--tag-background, #f1f5f9);
  color: var(--tag-color, #475569);
  border: 1px solid var(--tag-border, #e2e8f0);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

._tag_jfsxe_3:hover {
  background: var(--tag-background-hover, #e2e8f0);
}

._tagIcon_jfsxe_70 {
  color: var(--tag-icon-color, #64748b);
}

._removeButton_jfsxe_74 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--tag-remove-color, #64748b);
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  transition: all 0.2s ease;
}

._removeButton_jfsxe_74:hover {
  background: var(--tag-remove-background, rgba(239, 68, 68, 0.1));
  color: var(--tag-remove-color-hover, #ef4444);
}

/* Input container */
._inputContainer_jfsxe_93 {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 120px;
  position: relative;
}

._input_jfsxe_93 {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  color: var(--text-color, #1e293b);
  padding: 4px 0;
  min-width: 0;
}

._input_jfsxe_93::placeholder {
  color: var(--text-muted-color, #64748b);
}

._input_jfsxe_93:disabled {
  cursor: not-allowed;
}

._addButton_jfsxe_120 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color, #6366f1);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-left: 4px;
}

._addButton_jfsxe_120:hover {
  background: var(--primary-color-hover, #5b21b6);
}

/* Error message */
._error_jfsxe_139 {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--error-color, #ef4444);
}

/* Tag limit */
._tagLimit_jfsxe_146 {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-muted-color, #64748b);
  text-align: right;
}

/* Suggestions dropdown */
._suggestions_jfsxe_154 {
  position: fixed;
  z-index: 1000;
  background: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-height: 200px;
  overflow-y: auto;
  min-width: 200px;
  max-width: 400px;
}

._suggestionGroup_jfsxe_167 {
  border-bottom: 1px solid var(--border-light-color, #f1f5f9);
}

._suggestionGroup_jfsxe_167:last-child {
  border-bottom: none;
}

._suggestionGroupHeader_jfsxe_175 {
  padding: 8px 12px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted-color, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--background-light-color, #f8fafc);
  border-bottom: 1px solid var(--border-light-color, #f1f5f9);
}

._suggestion_jfsxe_154 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

._suggestion_jfsxe_154:hover,
._suggestion_jfsxe_154._selected_jfsxe_196 {
  background: var(--background-hover-color, #f8fafc);
}

._suggestion_jfsxe_154._selected_jfsxe_196 {
  background: var(--primary-color-light, #e0e7ff);
}

._suggestionContent_jfsxe_204 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

._suggestionTag_jfsxe_211 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--text-color, #1e293b);
}

._suggestionDescription_jfsxe_219 {
  font-size: 0.75rem;
  color: var(--text-muted-color, #64748b);
  margin-top: 2px;
}

._suggestionCount_jfsxe_225 {
  font-size: 0.75rem;
  color: var(--text-muted-color, #64748b);
  background: var(--background-light-color, #f1f5f9);
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  ._tagInput_jfsxe_3 {
    --background-color: #1e293b;
    --background-hover-color: #334155;
    --background-light-color: #0f172a;
    --border-color: #334155;
    --border-light-color: #334155;
    --text-color: #f1f5f9;
    --text-muted-color: #94a3b8;
    --primary-color: #818cf8;
    --primary-color-hover: #6366f1;
    --primary-color-light: rgba(129, 140, 248, 0.1);
    --primary-color-alpha: rgba(129, 140, 248, 0.1);
    --tag-background: #334155;
    --tag-background-hover: #475569;
    --tag-color: #e2e8f0;
    --tag-border: #475569;
    --tag-icon-color: #94a3b8;
    --tag-remove-color: #94a3b8;
    --tag-remove-color-hover: #f87171;
    --tag-remove-background: rgba(248, 113, 113, 0.1);
    --error-color: #f87171;
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  ._tagContainer_jfsxe_27 {
    padding: 6px;
  }
  
  ._tag_jfsxe_3 {
    font-size: 0.8125rem;
    padding: 3px 6px;
  }
  
  ._suggestions_jfsxe_154 {
    max-height: 150px;
  }
}
/* ChannelSettingsDialog - Modern modal styling using centralized theme */

.channel-settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop-color);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  padding: 20px;
  transition: var(--modal-backdrop-transition);
}

.channel-settings-modal {
  background: var(--modal-background);
  color: var(--modal-text-color);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  border: 1px solid var(--modal-border-color);
  width: 100%;
  max-width: var(--modal-max-width-large);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalEnter var(--modal-animation-duration) var(--modal-animation-easing);
}

.channel-settings-header {
  background: var(--modal-header-background);
  border-bottom: var(--modal-header-border);
  padding: var(--modal-header-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.channel-settings-title {
  color: var(--modal-title-color);
  font-size: var(--modal-title-font-size);
  font-weight: var(--modal-title-font-weight);
  margin: 0;
}

.channel-settings-close-button {
  background: transparent;
  border: none;
  color: var(--modal-text-color);
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.channel-settings-close-button:hover {
  background: var(--modal-button-secondary-hover-bg);
}

.channel-settings-tabs {
  display: flex;
  background: var(--modal-header-background);
  border-bottom: 1px solid var(--modal-border-color);
  flex-shrink: 0;
}

.channel-settings-tab {
  background: transparent;
  border: none;
  color: var(--modal-text-color);
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.channel-settings-tab:hover {
  background: var(--modal-footer-background);
}

.channel-settings-tab.active {
  color: var(--modal-button-primary-bg);
  border-bottom-color: var(--modal-button-primary-bg);
  background: var(--modal-background);
}

.channel-settings-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--modal-body-padding);
  background: var(--modal-body-background);
}

.channel-settings-section {
  margin-bottom: 24px;
}

.channel-settings-section-title {
  color: var(--modal-title-color);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.channel-settings-form-group {
  margin-bottom: 16px;
}

.channel-settings-label {
  display: block;
  color: var(--modal-text-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.channel-settings-input,
.channel-settings-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--modal-footer-background);
  border: 1px solid var(--modal-border-color);
  border-radius: 6px;
  color: var(--modal-text-color);
  font-size: 14px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.channel-settings-input:focus,
.channel-settings-textarea:focus {
  outline: none;
  border-color: var(--modal-button-primary-bg);
}

.channel-settings-textarea {
  resize: vertical;
  min-height: 80px;
}

.channel-settings-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-settings-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--modal-button-primary-bg);
}

.channel-settings-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.channel-settings-button {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.channel-settings-button.primary {
  background: var(--modal-button-primary-bg);
  color: var(--modal-button-primary-text);
}

.channel-settings-button.primary:hover {
  background: var(--modal-button-primary-hover-bg);
}

.channel-settings-button.secondary {
  background: var(--modal-button-secondary-bg);
  color: var(--modal-button-secondary-text);
  border: 1px solid var(--modal-border-color);
}

.channel-settings-button.secondary:hover {
  background: var(--modal-button-secondary-hover-bg);
}

.channel-settings-button.danger {
  background: var(--modal-button-danger-bg);
  color: var(--modal-button-danger-text);
}

.channel-settings-button.danger:hover {
  background: var(--modal-button-danger-hover-bg);
}

.channel-settings-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.channel-settings-member-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.channel-settings-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--modal-footer-background);
  border-radius: 6px;
  border: 1px solid var(--modal-border-color);
}

.channel-settings-member-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.channel-settings-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--modal-button-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.channel-settings-member-details {
  display: flex;
  flex-direction: column;
}

.channel-settings-member-name {
  color: var(--modal-title-color);
  font-weight: 500;
  font-size: 14px;
}

.channel-settings-member-role {
  color: var(--modal-text-color);
  font-size: 12px;
}

.channel-settings-taxonomy {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--modal-border-color);
}

.channel-settings-taxonomy-title {
  color: var(--modal-title-color);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Animation */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .channel-settings-modal {
    margin: 10px;
    max-width: calc(100vw - 20px);
  }
  
  .channel-settings-tabs {
    flex-wrap: wrap;
  }
  
  .channel-settings-tab {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .channel-settings-actions {
    flex-direction: column;
  }
  
  .channel-settings-button {
    width: 100%;
    justify-content: center;
  }
}
/* Animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Animation utility classes */
.fade-in {
  animation: fadeIn 0.3s ease-in-out forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease-in-out forwards;
}

.slide-in-right {
  animation: slideInRight 0.3s ease-in-out forwards;
}

.slide-out-right {
  animation: slideOutRight 0.3s ease-in-out forwards;
}

.slide-in-left {
  animation: slideInLeft 0.3s ease-in-out forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.3s ease-in-out forwards;
}

.slide-in-up {
  animation: slideInUp 0.3s ease-in-out forwards;
}

.slide-out-down {
  animation: slideOutDown 0.3s ease-in-out forwards;
}

.scale-in {
  animation: scaleIn 0.3s ease-in-out forwards;
}

.scale-out {
  animation: scaleOut 0.3s ease-in-out forwards;
}

.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

.spin {
  animation: spin 1s linear infinite;
}

.bounce {
  animation: bounce 1s ease infinite;
}

/* Transition classes */
.transition-opacity {
  transition: opacity 0.3s ease-in-out;
}

.transition-transform {
  transition: transform 0.3s ease-in-out;
}

.transition-all {
  transition: all 0.3s ease-in-out;
}

/* Hover effect classes */
.hover-scale {
  transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-brightness {
  transition: filter 0.2s ease-in-out;
}

.hover-brightness:hover {
  filter: brightness(1.2);
}

.hover-shadow {
  transition: box-shadow 0.2s ease-in-out;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Loading animations */
.loading-dots {
  display: inline-flex;
  align-items: center;
}

.loading-dots::after {
  content: '.';
  animation: loading-dots 1.5s infinite;
  width: 1em;
  text-align: left;
}

@keyframes loading-dots {
  0% { content: '.'; }
  33% { content: '..'; }
  66% { content: '...'; }
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #5865f2;
  animation: spin 1s linear infinite;
}

/* Modal animations */
.modal-overlay {
  animation: fadeIn 0.3s ease-in-out forwards;
}

.modal-content {
  animation: scaleIn 0.3s ease-in-out forwards;
}

.modal-overlay.closing {
  animation: fadeOut 0.3s ease-in-out forwards;
}

.modal-content.closing {
  animation: scaleOut 0.3s ease-in-out forwards;
}

/* Voice Channel Button Styles */
.voice-channel-button {
  position: relative;
  overflow: hidden;
}

.voice-channel-button.has-users::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: voice-shimmer 2s infinite;
}

.voice-activity-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: #34d399;
  border-radius: 50%;
  animation: voice-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(52, 211, 153, 0.6);
}

@keyframes voice-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes voice-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}
/**
 * EditorAssistant component styles
 * Uses CSS variables for theming
 */

:root {
  /* Light theme variables */
  --ea-light-bg: #ffffff;
  --ea-light-bg-secondary: #f5f5f5;
  --ea-light-text: #333333;
  --ea-light-text-secondary: #666666;
  --ea-light-border: #e0e0e0;
  --ea-light-accent: var(--primary, #5c6bc0);
  --ea-light-accent-hover: var(--primary-dark, #3f51b5);
  --ea-light-error: #e53935;
  --ea-light-success: #43a047;
  --ea-light-shadow: rgba(0, 0, 0, 0.1);
  --ea-light-overlay: rgba(255, 255, 255, 0.8);

  /* Dark theme variables */
  --ea-dark-bg: #2d2d2d;
  --ea-dark-bg-secondary: #3d3d3d;
  --ea-dark-text: #e0e0e0;
  --ea-dark-text-secondary: #b0b0b0;
  --ea-dark-border: #555555;
  --ea-dark-accent: var(--primary, #7986cb);
  --ea-dark-accent-hover: var(--primary-dark, #5c6bc0);
  --ea-dark-error: #ef5350;
  --ea-dark-success: #66bb6a;
  --ea-dark-shadow: rgba(0, 0, 0, 0.3);
  --ea-dark-overlay: rgba(45, 45, 45, 0.8);
}

/* Theme application */
.theme-light {
  --ea-bg: var(--ea-light-bg);
  --ea-bg-secondary: var(--ea-light-bg-secondary);
  --ea-text: var(--ea-light-text);
  --ea-text-secondary: var(--ea-light-text-secondary);
  --ea-border: var(--ea-light-border);
  --ea-accent: var(--ea-light-accent);
  --ea-accent-hover: var(--ea-light-accent-hover);
  --ea-error: var(--ea-light-error);
  --ea-success: var(--ea-light-success);
  --ea-shadow: var(--ea-light-shadow);
  --ea-overlay: var(--ea-light-overlay);
}

.theme-dark {
  --ea-bg: var(--ea-dark-bg);
  --ea-bg-secondary: var(--ea-dark-bg-secondary);
  --ea-text: var(--ea-dark-text);
  --ea-text-secondary: var(--ea-dark-text-secondary);
  --ea-border: var(--ea-dark-border);
  --ea-accent: var(--ea-dark-accent);
  --ea-accent-hover: var(--ea-dark-accent-hover);
  --ea-error: var(--ea-dark-error);
  --ea-success: var(--ea-dark-success);
  --ea-shadow: var(--ea-dark-shadow);
  --ea-overlay: var(--ea-dark-overlay);
}

/* Base container */
.editor-assistant {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ea-text);
  box-sizing: border-box;
}

.editor-assistant * {
  box-sizing: border-box;
}

/* Enhanced Button Styles with Gradient and Glow */
.ea-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary, #007acc) 0%, var(--primary-dark, #005a99) 100%);
  color: white;
  border: none !important;
  outline: none !important;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px var(--primary-light, rgba(0, 122, 204, 0.4));
  position: relative;
  overflow: hidden;
}

.ea-button::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;
}

.ea-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--primary-light, rgba(0, 122, 204, 0.6));
}

.ea-button:hover::before {
  left: 100%;
}

/* Only show focus outline for keyboard navigation */
.ea-button:focus {
  outline: none !important;
  border: none !important;
}

.ea-button:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: 0 0 0 3px var(--primary-light, rgba(0, 122, 204, 0.3));
}

.ea-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px var(--primary-light, rgba(0, 122, 204, 0.2));
}

/* Enhanced Success State */
.ea-button.ea-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.ea-button.ea-success:hover {
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6);
}

.ea-button-icon {
  color: white;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

.ea-button-compact {
  padding: 4px 8px;
  font-size: 12px;
}

.ea-button-expanded {
  padding: 8px 16px;
  font-size: 16px;
}

/* Toolbar styles */
.ea-toolbar {
  display: flex;
  align-items: center;
  background-color: var(--ea-bg);
  border: 1px solid var(--ea-border);
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 2px 4px var(--ea-shadow);
}

.ea-toolbar-expanded {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 420px;
  max-width: 600px;
  background: var(--ea-bg);
  border: 1px solid var(--ea-border);
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 0;
  z-index: 1001;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Command Header with Gradient */
.ea-toolbar-expanded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(135deg, var(--primary, #007acc) 0%, var(--primary-dark, #005a99) 100%);
  border-radius: 12px 12px 0 0;
}

.ea-command-header {
  position: relative;
  padding: 20px;
  color: white;
  z-index: 1;
}

.ea-command-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ea-command-subtitle {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 4px;
  font-weight: 400;
}

/* Audio Toggle Container - Enhanced Visibility */
.ea-audio-toggle-container {
  padding: 16px 20px 12px 20px;
  border-bottom: 1px solid var(--ea-border);
  margin-bottom: 12px;
  background: var(--ea-bg-secondary);
}

.ea-audio-toggle-buttons {
  display: flex;
  gap: 8px;
  background: var(--ea-bg);
  border: 2px solid var(--ea-border);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ea-audio-toggle-btn {
  flex: 1;
  padding: 16px 20px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--ea-text-secondary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  min-height: 56px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ea-audio-toggle-btn:hover:not(:disabled) {
  background: var(--ea-hover);
  color: var(--ea-text);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.ea-audio-toggle-btn.active {
  background: linear-gradient(135deg, var(--primary, #0066cc), var(--primary-dark, #0052a3));
  color: white;
  box-shadow: 0 8px 25px var(--primary-light, rgba(0, 122, 204, 0.4));
  transform: translateY(-2px);
  font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.ea-audio-toggle-btn.active::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(135deg, var(--primary, #0066cc), var(--primary-dark, #0052a3));
  border-radius: 16px;
  z-index: -1;
  opacity: 0.3;
  filter: blur(8px);
}

.ea-audio-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  background: var(--ea-surface);
  color: var(--ea-text-muted);
}

.ea-audio-toggle-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Emoji styling for better visibility */
.ea-audio-toggle-btn .emoji {
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Enhanced Input Styles - Command Bar Style */
.ea-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ea-border);
  background: var(--ea-bg);
}

.ea-input-icon {
  color: var(--primary, #007acc);
  flex-shrink: 0;
  padding: 8px;
  background: var(--ea-bg-secondary);
  border-radius: 6px;
}

.ea-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ea-text);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  padding: 12px 0;
}

.ea-input::placeholder {
  color: var(--ea-text-secondary);
  font-weight: 400;
}

.ea-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #007acc);
  padding: 8px;
}

.ea-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Enhanced Suggestions - Action Wheel Style */
.ea-suggestions {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.ea-suggestion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid var(--ea-border);
  border-radius: 12px;
  background: var(--ea-bg-secondary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ea-suggestion::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-light, rgba(0, 122, 204, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ea-suggestion:hover {
  background: var(--ea-bg);
  border-color: var(--primary, #007acc);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px var(--primary-light, rgba(0, 122, 204, 0.15));
}

/* Enhanced Suggestion Selected State */
.ea-suggestion-selected {
  background: var(--primary, #007acc) !important;
  color: white !important;
  border-color: var(--primary-dark, #005a99) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--primary-light, rgba(0, 122, 204, 0.3));
}

.ea-suggestion-selected .ea-suggestion-icon {
  color: white !important;
}

/* Loading Skeleton for Suggestions */
.ea-suggestions-loading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.ea-suggestion-skeleton {
  height: 40px;
  background: linear-gradient(90deg, var(--ea-bg-secondary) 25%, var(--ea-bg) 50%, var(--ea-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 6px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ea-suggestion:hover::before {
  opacity: 1;
}

.ea-suggestion-icon {
  font-size: 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.ea-suggestion span:last-child {
  font-weight: 500;
  position: relative;
  z-index: 1;
}

/* Enhanced Error Display */
.ea-error {
  margin: 16px 20px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Floating panel styles - Enhanced */
.ea-floating-panel {
  position: absolute;
  min-width: 380px;
  background: var(--ea-bg);
  border: 1px solid var(--ea-border);
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 0;
  z-index: 1001;
  animation: fadeInScale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Context menu styles - Enhanced */
.ea-context-menu {
  position: fixed;
  min-width: 220px;
  background: var(--ea-bg);
  border: 1px solid var(--ea-border);
  border-radius: 8px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 8px;
  z-index: 1002;
  animation: fadeInScale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ea-context-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: var(--ea-text);
}

.ea-context-menu-item:hover {
  background: var(--ea-bg-secondary);
  color: var(--primary, #007acc);
}

.ea-context-menu-item-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.ea-context-menu-divider {
  height: 1px;
  background: var(--ea-border);
  margin: 8px 0;
}

/* Sidebar Position - Enhanced */
.ea-sidebar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ea-bg);
}

.ea-sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--ea-border);
  background: var(--primary-light, rgba(0, 122, 204, 0.05));
}

.ea-sidebar-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* Size Variants */
.ea-small .ea-button {
  padding: 8px 12px;
  font-size: 13px;
}

.ea-large .ea-button {
  padding: 12px 20px;
  font-size: 16px;
}

.ea-context-menu-item-icon {
  margin-right: 8px;
  color: var(--primary, #007acc);
}

.ea-context-menu-divider {
  height: 1px;
  background-color: var(--ea-border);
  margin: 4px 0;
}

/* Suggestions styles */
.ea-suggestions {
  margin-top: 8px;
}

.ea-suggestion {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 4px;
  background-color: var(--ea-bg-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ea-suggestion:hover {
  background-color: var(--primary, #007acc);
  color: white;
}

.ea-suggestion-icon {
  margin-right: 8px;
}

/* Loading indicator */
.ea-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.ea-spinner {
  animation: spin 1s linear infinite;
  color: var(--primary, #007acc);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Toast Notification System */
.ea-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  min-width: 300px;
  max-width: 500px;
  padding: 16px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  animation: toast-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.ea-toast.ea-toast-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.ea-toast.ea-toast-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 0.9) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.ea-toast.ea-toast-info {
  background: linear-gradient(135deg, var(--primary, rgba(0, 122, 204, 0.9)) 0%, var(--primary-dark, rgba(0, 90, 153, 0.9)) 100%);
  border: 1px solid var(--primary-light, rgba(0, 122, 204, 0.3));
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Enhanced Error Styles */
.ea-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ea-error-with-retry {
  justify-content: space-between;
}

.ea-retry-button {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ea-retry-button:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Error message */
.ea-error {
  color: var(--ea-error);
  padding: 8px;
  margin-top: 8px;
  background-color: var(--ea-bg-secondary);
  border-radius: 4px;
  border-left: 3px solid var(--ea-error);
}

/* Success message */
.ea-success {
  color: var(--ea-success);
  padding: 8px;
  margin-top: 8px;
  background-color: var(--ea-bg-secondary);
  border-radius: 4px;
  border-left: 3px solid var(--ea-success);
}

/* Editor-specific styles */
.ea-text-editor {
  /* Text editor specific styles */
}

.ea-code-editor {
  /* Code editor specific styles */
}

.ea-drawing-editor {
  /* Drawing editor specific styles */
}

.ea-spreadsheet-editor {
  /* Spreadsheet editor specific styles */
}

.ea-model3d-editor {
  /* 3D model editor specific styles */
}

.ea-audio-editor {
  /* Audio editor specific styles */
}

.ea-video-editor {
  /* Video editor specific styles */
}

.ea-workflow-editor {
  /* Workflow editor specific styles */
}

/* ============================================================================ */
/* ENHANCED RESPONSIVE DESIGN & ACCESSIBILITY */
/* ============================================================================ */

/* Mobile and Tablet Responsive Design */
@media (max-width: 768px) {
  .ea-toolbar-expanded {
    width: 100vw;
    max-width: none;
    left: 0 !important;
    right: 0;
    margin: 0;
    border-radius: 0;
  }

  .ea-floating-panel {
    width: 90vw;
    max-width: none;
    left: 5vw !important;
  }

  .ea-toast {
    left: 10px;
    right: 10px;
    min-width: auto;
    max-width: none;
  }

  .ea-suggestion {
    padding: 16px;
    font-size: 16px;
    min-height: 44px; /* Touch target size */
  }

  .ea-button {
    padding: 12px 18px;
    font-size: 16px;
    min-height: 44px; /* Touch target size */
  }

  .ea-input {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 12px 16px;
  }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ea-button-icon,
  .ea-suggestion-icon {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Enhanced Accessibility */
.ea-button:focus-visible {
  outline: none !important;
}

.ea-suggestion:focus-visible,
.ea-input:focus-visible {
  outline: 2px solid var(--primary, #007acc);
  outline-offset: 2px;
}

/* Screen Reader Only Content */
.ea-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .ea-button,
  .ea-suggestion,
  .ea-toast,
  .ea-toolbar-expanded,
  .ea-floating-panel {
    animation: none;
    transition: none;
  }

  .ea-button::before,
  .ea-suggestion::before {
    display: none;
  }

  .ea-suggestion-skeleton {
    animation: none;
    background: var(--ea-bg-secondary);
  }
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
  .ea-toast {
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  .ea-button {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .ea-suggestion {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* Print Styles */
@media print {
  .ea-toast,
  .ea-floating-panel,
  .ea-context-menu {
    display: none !important;
  }
}


/**
 * Standardized Editor CSS
 *
 * This file provides styles for the standardized editor container.
 */
/* Import the standardized UI styles */
/**
 * Standard Editor UI Styles
 *
 * This file provides standardized styles for all editor UIs.
 */
/* Import Font Awesome */
/* Editor container */
.es-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  background-color: var(--bg-surface-1, #ffffff);
  color: var(--text-primary, #333333);
}
.es-editor-content {
  flex: 1;
  overflow: auto;
  position: relative;
}
/* Editor toolbar */
.es-editor-toolbar {
  display: flex;
  background-color: var(--bg-surface-2, #f5f5f5);
  border-bottom: 1px solid var(--border-color, #ddd);
  padding: 5px;
  gap: 5px;
  z-index: 10;
}
.es-editor-toolbar-top {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.es-editor-toolbar-right {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--border-color, #ddd);
  border-bottom: none;
}
.es-editor-toolbar-bottom {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid var(--border-color, #ddd);
  border-bottom: none;
}
.es-editor-toolbar-left {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-right: 1px solid var(--border-color, #ddd);
  border-bottom: none;
}
/* Editor tools */
.es-editor-tool {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-primary, #333);
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-editor-tool:hover {
  background-color: var(--bg-surface-3, #e0e0e0);
}
.es-editor-tool-active {
  background-color: var(--bg-surface-3, #ddd);
  color: var(--text-primary, #000);
}
.es-editor-tool i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Fallback for missing Font Awesome icons - replaced emojis with symbols */
.es-editor-tool i.fa-mouse-pointer:before { content: "↖"; }
.es-editor-tool i.fa-paint-brush:before { content: "✎"; }
.es-editor-tool i.fa-eraser:before { content: "⌫"; }
.es-editor-tool i.fa-square:before { content: "■"; }
.es-editor-tool i.fa-circle:before { content: "●"; }
.es-editor-tool i.fa-minus:before { content: "−"; }
.es-editor-tool i.fa-font:before { content: "A"; }
.es-editor-tool i.fa-palette:before { content: "◐"; }
.es-editor-tool i.fa-trash:before { content: "×"; }
.es-editor-tool i.fa-save:before { content: "✓"; }
.es-editor-tool i.fa-download:before { content: "↓"; }
.es-editor-tool i.fa-bold:before { content: "𝐁"; }
.es-editor-tool i.fa-italic:before { content: "𝐼"; }
.es-editor-tool i.fa-underline:before { content: "U̲"; }
.es-editor-tool i.fa-strikethrough:before { content: "S̶"; }
.es-editor-tool i.fa-heading:before { content: "H"; }
.es-editor-tool i.fa-h1:before { content: "H₁"; }
.es-editor-tool i.fa-h2:before { content: "H₂"; }
.es-editor-tool i.fa-h3:before { content: "H₃"; }
.es-editor-tool i.fa-list:before { content: "📋"; }
.es-editor-tool i.fa-list-ul:before { content: "•"; }
.es-editor-tool i.fa-list-ol:before { content: "1."; }
.es-editor-tool i.fa-tasks:before { content: "☑️"; }
.es-editor-tool i.fa-robot:before { content: "🤖"; }
.es-editor-tool i.fa-exchange-alt:before { content: "🔄"; }
.es-editor-tool i.fa-copy:before { content: "📋"; }
.es-editor-tool i.fa-cut:before { content: "✂️"; }
.es-editor-tool i.fa-magic:before { content: "✨"; }
.es-editor-tool i.fa-cube:before { content: "📦"; }
.es-editor-tool i.fa-video:before { content: "🎬"; }
.es-editor-tool i.fa-volume-up:before { content: "🔊"; }
.es-editor-tool i.fa-image:before { content: "🖼️"; }
.es-editor-tool i.fa-file-alt:before { content: "📄"; }
.es-editor-tool i.fa-chart-bar:before { content: "📊"; }
.es-editor-tool i.fa-chart-line:before { content: "📈"; }
.es-editor-tool i.fa-chart-pie:before { content: "🥧"; }
.es-editor-tool i.fa-wave-square:before { content: "〰️"; }
/* Toolbar divider */
.es-editor-toolbar-divider {
  width: 1px;
  height: 24px;
  background-color: var(--border-color, #ddd);
  margin: 0 4px;
}
.es-editor-toolbar-right .es-editor-toolbar-divider,
.es-editor-toolbar-left .es-editor-toolbar-divider {
  width: 24px;
  height: 1px;
  margin: 4px 0;
}
/* AI assistant button */
.es-editor-ai-button {
  background-color: var(--primary, #4285f4);
  border: none;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  font-size: 16px;
  color: white;
  margin-left: auto;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-editor-ai-button:hover {
  background-color: var(--primary-dark, #3367d6);
}
.es-editor-ai-button i {
  font-size: 16px;
}
/* Conversion button */
.es-editor-conversion-button {
  background-color: var(--secondary, #0f9d58);
  border: none;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  font-size: 16px;
  color: white;
  margin-left: 5px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-editor-conversion-button:hover {
  background-color: var(--secondary-dark, #0b8043);
}
.es-editor-conversion-button i {
  font-size: 16px;
}
/* Selection tools */
.es-editor-selection-tools {
  position: absolute;
  display: flex;
  background-color: var(--bg-surface-1, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 5px;
  gap: 5px;
  z-index: 1000;
}
.es-editor-selection-tool {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary, #333);
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-editor-selection-tool:hover {
  background-color: var(--bg-surface-3, #e0e0e0);
}
.es-editor-selection-tool i {
  font-size: 14px;
}
/* Conversion options panel */
.es-editor-conversion-options {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface-1, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 5px;
  z-index: 1000;
  min-width: 200px;
}
.es-editor-conversion-option {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary, #333);
  text-align: left;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.es-editor-conversion-option:hover {
  background-color: var(--bg-surface-2, #f5f5f5);
}
.es-editor-conversion-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.es-editor-conversion-option i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
/* Dark mode styles */
.dark-mode .es-editor {
  background-color: var(--bg-surface-1, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
}
.dark-mode .es-editor-toolbar {
  background-color: var(--bg-surface-2, #313244);
  border-color: var(--border-color, #45475a);
}
.dark-mode .es-editor-tool {
  color: var(--text-primary, #f8f8f2);
}
.dark-mode .es-editor-tool:hover {
  background-color: var(--bg-surface-3, #45475a);
}
.dark-mode .es-editor-tool-active {
  background-color: var(--bg-surface-3, #45475a);
  color: var(--text-primary, #f8f8f2);
}
.dark-mode .es-editor-toolbar-divider {
  background-color: var(--border-color, #45475a);
}
.dark-mode .es-editor-selection-tools,
.dark-mode .es-editor-conversion-options {
  background-color: var(--bg-surface-1, #1e1e2e);
  border-color: var(--border-color, #45475a);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.dark-mode .es-editor-selection-tool,
.dark-mode .es-editor-conversion-option {
  color: var(--text-primary, #f8f8f2);
}
.dark-mode .es-editor-selection-tool:hover,
.dark-mode .es-editor-conversion-option:hover {
  background-color: var(--bg-surface-3, #45475a);
}
/* Responsive styles */
@media (max-width: 768px) {
  .es-editor-toolbar-top {
    flex-wrap: wrap;
  }

  .es-editor-toolbar-right {
    position: static;
    flex-direction: row;
    width: 100%;
    height: auto;
    border-left: none;
    border-top: 1px solid var(--border-color, #ddd);
  }

  .es-editor-toolbar-left {
    position: static;
    flex-direction: row;
    width: 100%;
    height: auto;
    border-right: none;
    border-top: 1px solid var(--border-color, #ddd);
  }

  .es-editor-ai-button,
  .es-editor-conversion-button {
    margin: 0;
  }
}
/* Ensure the toolbar is visible */
.es-editor-toolbar {
  display: flex !important;
  padding: 8px !important;
  gap: 8px !important;
  background-color: #f0f0f0 !important;
  border-bottom: 1px solid #ddd !important;
  z-index: 100 !important;
}
/* Dark mode toolbar */
.dark-mode .es-editor-toolbar {
  background-color: #333 !important;
  border-bottom: 1px solid #555 !important;
}
/* Ensure the tools are visible */
.es-editor-tool {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  margin: 0 2px !important;
}
.dark-mode .es-editor-tool {
  background-color: #444 !important;
  border: 1px solid #555 !important;
  color: #fff !important;
}
.es-editor-tool:hover {
  background-color: #f5f5f5 !important;
}
.dark-mode .es-editor-tool:hover {
  background-color: #555 !important;
}
.standardized-editor-container {
  display: flex;
  flex-direction: column;
  /* CRITICAL: Parent container needs defined height */
  min-height: 500px;
  width: 100%;
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  background-color: var(--bg-surface-1, #ffffff);
  color: var(--text-primary, #333333);
}
.standardized-editor-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Remove height: 100% to allow proper flex layout */
}
/* Hide the original editor toolbar when using the standardized UI */
.standardized-editor-content .text-editor-toolbar,
.standardized-editor-content .excalidraw-toolbar,
.standardized-editor-content .code-editor-toolbar,
.standardized-editor-content .modeling-header,
.standardized-editor-content .studio-toolbar {
  display: none !important;
}
/* Ensure the editor content takes full height and uses flexbox properly */
.standardized-editor-content .excalidraw-editor-container,
.standardized-editor-content .code-editor-layout,
.standardized-editor-content .modeling-editor-container,
.standardized-editor-content .studio-audio-editor,
.standardized-editor-content .studio-video-editor {
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* Text editor wrapper uses its own flex layout - don't override */
.standardized-editor-content .text-editor-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Remove height constraints that prevent footer from working */
}
/* Fallback editor styles */
.standardized-editor-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-color: var(--bg-surface-1, #ffffff);
  color: var(--text-primary, #333333);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 16px;
  padding: 20px;
  text-align: center;
}
/* Dark mode styles */
.dark-mode .standardized-editor-container {
  background-color: var(--bg-surface-1, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
}
.dark-mode .standardized-editor-fallback {
  background-color: var(--bg-surface-1, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
}
/* Collaboration Bar Styles */
.editor-collaboration-bar {
  transition: all 0.2s ease;
}
.editor-collaboration-bar:hover {
  background: var(--bg-surface-3, #383a59) !important;
}
/* Pulse animation for collaboration status */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(72, 187, 120, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
  }
}
/* Responsive styles */
@media (max-width: 768px) {
  .standardized-editor-container {
    flex-direction: column;
  }

  .editor-collaboration-bar {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  .editor-collaboration-bar span {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}
/**
 * Standard Toolbar Styles
 * 
 * Universal toolbar that appears in all editors
 * Collapsible and clean design
 */

.standard-toolbar {
  display: flex;
  align-items: center;
  background: var(--bg-surface-2, #2a2e36);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  padding: 4px;
  gap: 4px;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  z-index: 10;
}

.standard-toolbar-top {
  margin-bottom: 8px;
}

.standard-toolbar-bottom {
  margin-top: 8px;
}

/* Collapsed state - ACTUALLY HIDDEN */
.standard-toolbar.collapsed {
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.2s ease;
}

/* Expanded state */
.standard-toolbar:not(.collapsed) {
  height: auto;
  min-height: 48px;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease;
}

/* Collapse Button */
.standard-toolbar-collapse-btn {
  background: var(--bg-surface-3, #3a3e46);
  border: 1px solid var(--border-color, #444);
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  color: var(--text-secondary, #a0a0a0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 28px;
  height: 28px;
}

.standard-toolbar-collapse-btn:hover {
  background: var(--bg-surface-4, #4a4e56);
  color: var(--text-primary, #ffffff);
  border-color: var(--border-hover, #555);
}

.standard-toolbar-collapse-btn:active {
  transform: scale(0.95);
}

/* Toolbar Content */
.standard-toolbar-content {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

/* Toolbar Buttons */
.standard-toolbar-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-secondary, #a0a0a0);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 500;
  min-height: 28px;
  white-space: nowrap;
}

.standard-toolbar-btn:hover:not(.disabled) {
  background: var(--bg-surface-3, #3a3e46);
  color: var(--text-primary, #ffffff);
  border-color: var(--border-hover, #555);
}

.standard-toolbar-btn:active:not(.disabled) {
  background: var(--bg-surface-4, #4a4e56);
  transform: scale(0.98);
}

.standard-toolbar-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.standard-toolbar-btn-label {
  font-size: 11px;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .standard-toolbar-btn-label {
    display: none; /* Hide labels on small screens, show only icons */
  }
  
  .standard-toolbar-btn {
    padding: 6px;
    min-width: 28px;
    justify-content: center;
  }
}

/* Focus Styles for Accessibility */
.standard-toolbar-collapse-btn:focus,
.standard-toolbar-btn:focus {
  outline: 2px solid var(--accent-color, #007bff);
  outline-offset: 2px;
}

/* Dark Theme Support */
.standard-toolbar[data-theme="dark"] {
  --bg-surface-2: #1e1e1e;
  --bg-surface-3: #2d2d2d;
  --bg-surface-4: #3d3d3d;
  --border-color: #404040;
  --border-hover: #555555;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
}

/* Light Theme Support */
.standard-toolbar[data-theme="light"] {
  --bg-surface-2: #f8f9fa;
  --bg-surface-3: #e9ecef;
  --bg-surface-4: #dee2e6;
  --border-color: #dee2e6;
  --border-hover: #adb5bd;
  --text-primary: #212529;
  --text-secondary: #6c757d;
}

/* Animation for collapse/expand */
.standard-toolbar-content {
  animation: toolbar-expand 0.2s ease;
}

@keyframes toolbar-expand {
  from {
    opacity: 0;
    transform: scaleX(0.9);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .standard-toolbar {
    border-width: 2px;
  }
  
  .standard-toolbar-btn,
  .standard-toolbar-collapse-btn {
    border-width: 2px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .standard-toolbar,
  .standard-toolbar-btn,
  .standard-toolbar-collapse-btn,
  .standard-toolbar-content {
    transition: none;
    animation: none;
  }
}
/**
 * Editor-Specific Toolbar Styles
 * 
 * Customizable toolbar for each editor type
 * Collapsible and position-aware design
 */

.editor-specific-toolbar {
  display: flex;
  background: var(--bg-surface-2, #2a2e36);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  padding: 4px;
  gap: 4px;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  z-index: 9;
}

/* Position-specific styles */
.editor-specific-toolbar-top {
  flex-direction: row;
  margin-bottom: 8px;
}

.editor-specific-toolbar-bottom {
  flex-direction: row;
  margin-top: 8px;
}

.editor-specific-toolbar-left {
  flex-direction: column;
  margin-right: 8px;
}

.editor-specific-toolbar-right {
  flex-direction: column;
  margin-left: 8px;
}

/* Collapsed state - ACTUALLY HIDDEN */
.editor-specific-toolbar.collapsed {
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.2s ease;
}

/* Expanded state */
.editor-specific-toolbar:not(.collapsed) {
  height: auto;
  min-height: 48px;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease;
}

/* Collapse Button */
.editor-specific-toolbar-collapse-btn {
  background: var(--bg-surface-3, #3a3e46);
  border: 1px solid var(--border-color, #444);
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  color: var(--text-secondary, #a0a0a0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.editor-specific-toolbar-collapse-btn:hover {
  background: var(--bg-surface-4, #4a4e56);
  color: var(--text-primary, #ffffff);
  border-color: var(--border-hover, #555);
}

.editor-specific-toolbar-collapse-btn:active {
  transform: scale(0.95);
}

/* Toolbar Content */
.editor-specific-toolbar-content {
  display: flex;
  gap: 2px;
  flex: 1;
}

.editor-specific-toolbar-content.horizontal {
  flex-direction: row;
  align-items: center;
}

.editor-specific-toolbar-content.vertical {
  flex-direction: column;
  align-items: stretch;
}

/* Toolbar Buttons */
.editor-specific-toolbar-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-secondary, #a0a0a0);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 500;
  min-height: 28px;
  white-space: nowrap;
  position: relative;
}

.editor-specific-toolbar-btn:hover:not(.disabled) {
  background: var(--bg-surface-3, #3a3e46);
  color: var(--text-primary, #ffffff);
  border-color: var(--border-hover, #555);
}

.editor-specific-toolbar-btn:active:not(.disabled) {
  background: var(--bg-surface-4, #4a4e56);
  transform: scale(0.98);
}

.editor-specific-toolbar-btn.active {
  background: var(--accent-color, #007bff);
  color: white;
  border-color: var(--accent-color, #007bff);
}

.editor-specific-toolbar-btn.active:hover {
  background: var(--accent-color-hover, #0056b3);
  border-color: var(--accent-color-hover, #0056b3);
}

.editor-specific-toolbar-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.editor-specific-toolbar-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.editor-specific-toolbar-btn-label {
  font-size: 11px;
  font-weight: 500;
}

/* Vertical layout adjustments */
.editor-specific-toolbar-left .editor-specific-toolbar-btn,
.editor-specific-toolbar-right .editor-specific-toolbar-btn {
  justify-content: flex-start;
  min-width: 120px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .editor-specific-toolbar-btn-label {
    display: none; /* Hide labels on small screens */
  }
  
  .editor-specific-toolbar-btn {
    padding: 6px;
    min-width: 28px;
    justify-content: center;
  }
  
  .editor-specific-toolbar-left .editor-specific-toolbar-btn,
  .editor-specific-toolbar-right .editor-specific-toolbar-btn {
    min-width: 28px;
  }
}

/* Focus Styles for Accessibility */
.editor-specific-toolbar-collapse-btn:focus,
.editor-specific-toolbar-btn:focus {
  outline: 2px solid var(--accent-color, #007bff);
  outline-offset: 2px;
}

/* Dark Theme Support */
.editor-specific-toolbar[data-theme="dark"] {
  --bg-surface-2: #1e1e1e;
  --bg-surface-3: #2d2d2d;
  --bg-surface-4: #3d3d3d;
  --border-color: #404040;
  --border-hover: #555555;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --accent-color: #0078d4;
  --accent-color-hover: #106ebe;
}

/* Light Theme Support */
.editor-specific-toolbar[data-theme="light"] {
  --bg-surface-2: #f8f9fa;
  --bg-surface-3: #e9ecef;
  --bg-surface-4: #dee2e6;
  --border-color: #dee2e6;
  --border-hover: #adb5bd;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --accent-color: #0d6efd;
  --accent-color-hover: #0b5ed7;
}

/* Animation for collapse/expand */
.editor-specific-toolbar-content {
  animation: toolbar-expand 0.2s ease;
}

@keyframes toolbar-expand {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .editor-specific-toolbar {
    border-width: 2px;
  }
  
  .editor-specific-toolbar-btn,
  .editor-specific-toolbar-collapse-btn {
    border-width: 2px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .editor-specific-toolbar,
  .editor-specific-toolbar-btn,
  .editor-specific-toolbar-collapse-btn,
  .editor-specific-toolbar-content {
    transition: none;
    animation: none;
  }
}
/* Standardized Text Editor Styles */
.standardized-text-editor {
  display: flex;
  flex-direction: column;
  /* Remove height: 100% to allow flex layout to work properly */
  flex: 1 1 auto;
  background-color: var(--bg-surface-1, #1e1e2e);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.standardized-toolbar-container {
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bg-surface-2, #22242c) 0%, var(--bg-surface-3, #2a2e36) 100%);
  border-bottom: 1px solid var(--border-color, #2a2e36);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.standardized-text-editor-toolbar {
  border-radius: 8px 8px 0 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Ensure the AI assistant button integrates well */
.standardized-toolbar-container .ai-assist-toolbar-container {
  margin: 0;
}

.standardized-toolbar-container .ai-assist-toolbar-button {
  background: linear-gradient(135deg, var(--primary, #4f8cff) 0%, var(--primary-light, #a78bfa) 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  min-width: 100px !important;
  height: 36px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px var(--primary-light, rgba(79, 140, 255, 0.25)) !important;
  font-size: 13px !important;
  gap: 4px !important;
}

.standardized-toolbar-container .ai-assist-toolbar-button:hover {
  background: linear-gradient(135deg, var(--primary-dark, #3576d1) 0%, var(--primary-darker, #9333ea) 100%) !important;
  box-shadow: 0 3px 8px var(--primary-light, rgba(79, 140, 255, 0.35)) !important;
  transform: translateY(-1px) !important;
}

/* Light theme overrides */
.standardized-text-editor[data-theme="light"] {
  background-color: var(--bg-surface-1-light, #ffffff);
}

.standardized-text-editor[data-theme="light"] .standardized-toolbar-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom-color: #e9ecef;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .standardized-toolbar-container .ai-assist-toolbar-button {
    min-width: 80px !important;
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
  
  .standardized-toolbar-container .ai-assist-toolbar-button span {
    display: none;
  }
}

/* Animation for smooth transitions */
.standardized-text-editor * {
  transition: all 0.2s ease;
}

/* Focus states */
.standardized-text-editor:focus-within .standardized-toolbar-container {
  box-shadow: 0 2px 12px var(--primary-light, rgba(79, 140, 255, 0.15));
}
/* Modern Drawing Editor Styles */
.drawing-canvas-tab-content {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-1, #181a20);
  border-radius: 8px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.12);
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.drawing-canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 0 28px;
  background: var(--bg-surface-2, #23242c);
  border-bottom: 1px solid #23242c;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.drawing-canvas-title {
  color: var(--primary, #74c7ec);
  font-size: 1.15em;
  font-weight: 600;
  margin-right: 1.5em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.drawing-canvas-excalidraw-wrapper {
  flex: 1 1 auto;
  width: 100%;
  height: calc(100% - 48px - 30px); /* Subtract header and tip heights */
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: transparent;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.drawing-canvas-excalidraw-wrapper .excalidraw {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Remove these to prevent covering the drawing area */
/*
.drawing-canvas-excalidraw-wrapper .excalidraw .excalidraw__canvas {
  background: #181a20 !important;
}

.drawing-canvas-excalidraw-wrapper .excalidraw__canvas,
.drawing-canvas-excalidraw-wrapper .excalidraw__canvas canvas {
  background: #181a20 !important;
}
*/

.drawing-canvas-tip {
  position: relative;
  text-align: center;
  background: rgba(36, 37, 46, 0.92);
  color: #b3c2d6;
  font-size: 0.9em;
  padding: 6px 18px;
  margin: 5px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
  z-index: 10;
  pointer-events: none;
  opacity: 0.92;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawing-error-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(220, 53, 69, 0.1);
  color: #721c24;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

/* AI Assistant Styles */
.toolbar-section.ai-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
}

.ai-assist-toolbar-button {
  background: linear-gradient(135deg, var(--accent, #4f8cff) 0%, var(--accent-secondary, #a78bfa) 100%) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(79, 140, 255, 0.2) !important;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.inline-assist-button {
  margin-left: 8px;
  background: var(--bg-surface-3, #2a2c36);
  color: var(--text-primary, #ffffff);
  border: none;
  border-radius: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inline-assist-button:hover {
  background: var(--bg-surface-4, #353744);
  transform: translateY(-1px);
}

.inline-assist-icon {
  font-size: 18px;
}

/* AI Tools Dropdown Styles */
.ai-tools-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 12px;
}

.ai-tools-dropdown-button {
  background: linear-gradient(135deg, #4f8cff 0%, #8a63d2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  height: 36px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ai-tools-dropdown-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(79, 140, 255, 0.3);
}

.dropdown-arrow {
  font-size: 10px;
  margin-left: 4px;
}

.ai-tools-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background-color: var(--bg-surface-2, #1e2029);
  min-width: 400px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #353744);
  padding: 12px;
  margin-top: 8px;
}

.ai-tools-dropdown-content.show {
  display: block;
}

.ai-tool-item {
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle, #353744);
}

.ai-tool-item:last-child {
  border-bottom: none;
}

.ai-tool-item h4 {
  margin: 0 0 8px 0;
  color: var(--text-primary, #ffffff);
  font-size: 16px;
}

.ai-tool-item p {
  margin: 0 0 12px 0;
  color: var(--text-secondary, #b4b7c5);
  font-size: 14px;
}

/* Luma AI Image Generation Styles */
.luma-image-generation {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.luma-prompt-input {
  background: var(--bg-surface-3, #2a2c36);
  color: var(--text-primary, #ffffff);
  border: 1px solid var(--border-subtle, #353744);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  width: 100%;
  height: 36px;
  outline: none;
  transition: all 0.2s ease;
}

.luma-prompt-input:focus {
  border-color: var(--accent, #4f8cff);
  box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.2);
}

.luma-prompt-input::placeholder {
  color: var(--text-tertiary, #8e95a9);
}

.luma-generate-button {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa07a 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  height: 36px;
  min-width: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.luma-generate-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.luma-generate-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #555;
}

.drawing-assistant-button {
  background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.drawing-assistant-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* Performance Stats Styles */
.performance-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-size: 12px;
}

.performance-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}

.performance-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.performance-dot.normal {
  background-color: #4ade80; /* Green */
}

.performance-dot.optimized {
  background-color: #fbbf24; /* Yellow */
}

.performance-dot.minimal {
  background-color: #ef4444; /* Red */
}

.element-count {
  font-weight: 500;
  color: var(--text-secondary);
}.konva-drawing-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--background-color, #ffffff);
  border-radius: 8px;
  overflow: hidden;
}

.drawing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: var(--toolbar-bg, #f8f9fa);
  border-bottom: 1px solid var(--border-color, #e9ecef);
  gap: 16px;
  flex-wrap: wrap;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 6px;
  background-color: var(--button-bg, #ffffff);
  color: var(--text-color, #495057);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.tool-btn:hover:not(:disabled) {
  background-color: var(--button-hover-bg, #e9ecef);
  border-color: var(--button-hover-border, #adb5bd);
}

.tool-btn:active:not(:disabled) {
  background-color: var(--button-active-bg, #dee2e6);
  transform: translateY(1px);
}

.tool-btn.active {
  background-color: var(--primary-color, #007bff);
  color: white;
  border-color: var(--primary-color, #007bff);
}

.tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--disabled-bg, #f8f9fa);
}

.canvas-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--canvas-bg, #f5f5f5);
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.canvas-container canvas {
  background-color: transparent;
}

/* Color picker styles */
.color-picker {
  display: flex;
  gap: 4px;
  align-items: center;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid var(--border-color, #dee2e6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
  border-color: var(--primary-color, #007bff);
}

.color-swatch.active {
  border-color: var(--primary-color, #007bff);
  border-width: 3px;
}

/* Brush controls */
.brush-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--bg-surface-2, #f8f9fa);
  border-radius: 6px;
  min-width: 120px;
}

.brush-size-control,
.brush-opacity-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brush-label {
  font-size: 11px;
  color: var(--text-secondary, #6c757d);
  min-width: 40px;
  font-weight: 500;
}

.brush-size-display,
.brush-opacity-display {
  font-size: 12px;
  color: var(--text-primary, #212529);
  min-width: 35px;
  text-align: center;
  font-weight: 600;
}

.brush-size-slider,
.brush-opacity-slider {
  width: 60px;
  height: 4px;
  background: var(--bg-surface-3, #e9ecef);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.brush-size-slider::-webkit-slider-thumb,
.brush-opacity-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent-color, #007bff);
  border-radius: 50%;
  cursor: pointer;
}

.brush-size-slider::-moz-range-thumb,
.brush-opacity-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent-color, #007bff);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Responsive design */
@media (max-width: 768px) {
  .drawing-toolbar {
    padding: 6px 12px;
    gap: 8px;
  }
  
  .tool-btn {
    width: 36px;
    height: 36px;
  }
  
  .toolbar-section {
    gap: 6px;
  }
  
  .canvas-container {
    padding: 8px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .konva-drawing-editor {
    --background-color: #1a1a1a;
    --toolbar-bg: #2d2d2d;
    --border-color: #404040;
    --button-bg: #3a3a3a;
    --button-hover-bg: #4a4a4a;
    --button-hover-border: #5a5a5a;
    --button-active-bg: #2a2a2a;
    --text-color: #ffffff;
    --text-secondary: #b0b0b0;
    --canvas-bg: #2a2a2a;
    --disabled-bg: #1a1a1a;
    --slider-bg: #404040;
  }
}

/* Light theme */
.konva-drawing-editor.light-theme {
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f8f9fa;
  --bg-surface-3: #e9ecef;
  --border-color: #dee2e6;
  --text-primary: #495057;
  --text-secondary: #6c757d;
  --accent-color: var(--primary-color, #007bff);
  --accent-secondary: #0056b3;
}

/* Dark theme */
.konva-drawing-editor.dark-theme {
  --bg-surface-1: #1e1e2e;
  --bg-surface-2: #313244;
  --bg-surface-3: #45475a;
  --border-color: #45475a;
  --text-primary: #cdd6f4;
  --text-secondary: #a6adc8;
  --accent-color: var(--primary-color, #89b4fa);
  --accent-secondary: #a78bfa;
}

/* Animation for tool switching */
.tool-btn {
  position: relative;
  overflow: hidden;
}

.tool-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;
}

.tool-btn:hover::before {
  left: 100%;
}

/* Status indicators */
.drawing-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary, #6c757d);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--success-color, #28a745);
}

.status-indicator.error {
  background-color: var(--error-color, #dc3545);
}

.status-indicator.warning {
  background-color: var(--warning-color, #ffc107);
}

/* Selection and Layer Controls */
.selection-info {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
  padding: 4px 8px;
  background: var(--background-secondary, #f8f9fa);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.layer-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 8px;
  padding: 4px;
  background: var(--toolbar-bg);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.layer-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
  transition: all 0.2s ease;
}

.layer-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary-color);
}

.layer-toggle:hover {
  color: var(--text-color);
  background: var(--button-hover-bg);
}

/* Enhanced toolbar sections */
.toolbar-section {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid var(--border-color);
  position: relative;
}

.toolbar-section:last-child {
  border-right: none;
}

/* Tool button enhancements for selection */
.tool-btn.active {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  border-color: var(--primary-color);
}

.tool-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Canvas container enhancements */
.canvas-container {
  position: relative;
  overflow: hidden;
  background: var(--canvas-bg, #f5f5f5);
  transition: all 0.2s ease;
}



/* Drag and drop styling */
.canvas-container.drag-over {
  background-color: rgba(0, 123, 255, 0.05);
}

.canvas-container.drag-over::after {
  content: 'Drop image here to add to canvas';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 123, 255, 0.9);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Success message animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Selection rectangle styling */
.selection-rect {
  pointer-events: none;
  animation: selection-dash 1s linear infinite;
}

@keyframes selection-dash {
  to {
    stroke-dashoffset: -10;
  }
}

/* Transformer styling */
.transformer {
  pointer-events: auto;
}

/* Multi-selection indicator */
.multi-selection-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary-color);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Layer visibility indicators */
.layer-visibility-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-color, #28a745);
  margin-right: 4px;
}

.layer-visibility-indicator.hidden {
  background: var(--error-color, #dc3545);
}

/* Enhanced zoom and aspect ratio controls */
.zoom-display {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: center;
  padding: 0 4px;
  background: var(--background-secondary, #f8f9fa);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.aspect-ratio-select {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--button-bg);
  color: var(--text-color);
  font-size: 12px;
  cursor: pointer;
  min-width: 80px;
}

.aspect-ratio-select:hover:not(:disabled) {
  border-color: var(--primary-color);
}

.aspect-ratio-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.canvas-preset-select {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--button-bg);
  color: var(--text-color);
  font-size: 12px;
  cursor: pointer;
  min-width: 120px;
  margin-right: 8px;
}

.canvas-preset-select:hover:not(:disabled) {
  border-color: var(--primary-color);
}

.canvas-preset-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Enhanced canvas container with zoom support */
.canvas-container {
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.canvas-container:active {
  cursor: grabbing;
}

/* Grid overlay */
.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(to right, var(--border-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Canvas size inputs */
.canvas-size-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.size-input {
  width: 60px;
  padding: 2px 4px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--button-bg);
  color: var(--text-color);
  font-size: 11px;
  text-align: center;
}

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

.size-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Filter Panel */
.filter-panel {
  position: absolute;
  top: 60px;
  right: 16px;
  width: 280px;
  background: var(--toolbar-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-surface-2, #f8f9fa);
  border-bottom: 1px solid var(--border-color);
}

.filter-panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--button-hover-bg);
  color: var(--text-color);
}

.filter-controls {
  padding: 16px;
}

.filter-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color);
  min-width: 70px;
}

.filter-slider {
  flex: 1;
  margin: 0 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--slider-bg, #dee2e6);
  outline: none;
  cursor: pointer;
  appearance: none;
}

.filter-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.filter-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.filter-group span {
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 30px;
  text-align: right;
}

.filter-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.filter-btn {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover:not(:disabled) {
  background: var(--button-hover-bg);
  border-color: var(--primary-color);
}

.filter-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filter-btn.clear-btn {
  background: var(--error-color, #dc3545);
  color: white;
  border-color: var(--error-color, #dc3545);
}

.filter-btn.clear-btn:hover:not(:disabled) {
  background: #c82333;
  border-color: #c82333;
}

/* Mini map */
.mini-map {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 150px;
  height: 100px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background: var(--canvas-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Filter panel */
.filter-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 250px;
  background: var(--toolbar-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.filter-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.filter-control label {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 80px;
}

.filter-control input[type="range"] {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--slider-bg);
  outline: none;
  cursor: pointer;
}

.filter-control input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
}

.filter-control input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: none;
}

.filter-value {
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 30px;
  text-align: right;
}

/* Enhanced transformer with better visual feedback */
.konva-transformer {
  border-color: var(--primary-color) !important;
}

.konva-transformer .konva-anchor {
  fill: var(--primary-color) !important;
  stroke: white !important;
  stroke-width: 2px !important;
}

/* Responsive adjustments for new features */
@media (max-width: 768px) {
  .layer-controls {
    flex-direction: row;
    gap: 8px;
  }

  .selection-info {
    font-size: 11px;
    padding: 2px 6px;
  }

  .toolbar-section {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .toolbar-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .zoom-display {
    min-width: 35px;
    font-size: 11px;
  }

  .aspect-ratio-select {
    min-width: 70px;
    font-size: 11px;
  }

  .mini-map {
    width: 120px;
    height: 80px;
    bottom: 12px;
    right: 12px;
  }

  .filter-panel {
    width: 200px;
    padding: 8px;
  }
}

/* Drawing stage cursor styles - force override any conflicting CSS */
.drawing-stage {
  outline: none !important;
}

.drawing-stage.drawing-tool-brush,
.drawing-stage.drawing-tool-eraser,
.drawing-stage.drawing-tool-rectangle,
.drawing-stage.drawing-tool-circle {
  cursor: crosshair !important;
}

.drawing-stage.drawing-tool-text {
  cursor: text !important;
}

.drawing-stage.drawing-tool-move {
  cursor: grab !important;
}

.drawing-stage.drawing-tool-move:active {
  cursor: grabbing !important;
}

.drawing-stage.drawing-tool-select {
  cursor: default !important;
}

/* Layer Panel Styles - Simplified */
.layer-panel {
  position: absolute;
  top: 60px;
  right: 16px;
  width: 260px;
  background: var(--bg-surface-1, #ffffff);
  border: 1px solid var(--border-color, #e9ecef);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 350px;
  overflow: hidden;
}

.layer-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-surface-2, #f8f9fa);
  border-bottom: 1px solid var(--border-color, #e9ecef);
}

.layer-panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #212529);
}

.layer-panel-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary, #6c757d);
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.layer-panel-close:hover {
  background: var(--bg-surface-3, #e9ecef);
  color: var(--text-primary, #212529);
}

.layer-panel-content {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  padding: 8px;
}

.layer-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 12px;
}

.layer-item {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background: var(--bg-surface-2, #f8f9fa);
}

.layer-item:hover {
  background: var(--bg-surface-3, #e9ecef);
}

.layer-item.active {
  background: var(--accent-color-light, #e3f2fd);
  border-color: var(--accent-color, #007bff);
}

.layer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.layer-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #212529);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.layer-controls {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}

.layer-control-btn {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary, #6c757d);
  transition: all 0.2s ease;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer-control-btn:hover {
  background: var(--bg-surface-1, #ffffff);
  color: var(--text-primary, #212529);
}

.layer-control-btn.active {
  color: var(--accent-color, #007bff);
  background: var(--accent-color-light, #e3f2fd);
}

.layer-control-btn.delete {
  color: var(--danger-color, #dc3545);
}

.layer-control-btn.delete:hover {
  background: var(--danger-color-light, #f8d7da);
  color: var(--danger-color, #dc3545);
}

.layer-control-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.layer-add-btn {
  width: 100%;
  padding: 10px 16px;
  background: var(--accent-color, #007bff);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.layer-add-btn:hover:not(:disabled) {
  background: var(--accent-color-hover, #0056b3);
}

.layer-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/**
 * Standardized Drawing Editor Styles
 * 
 * Container for the drawing editor with collapsible toolbars
 */

.standardized-drawing-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-surface-1, #1e1e1e);
  overflow: hidden;
}

.standardized-drawing-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* CodeEditor.css - Modern, themed code editor styles */
.code-editor-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  border-radius: var(--radius-sm, 8px);
  box-sizing: border-box;
}

/* Toolbar */
.code-editor-toolbar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background-color: var(--bg-surface-2, #313244);
  border-bottom: 1px solid var(--border-color, #45475a);
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  z-index: 10;
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

.toolbar-section:not(:last-child) {
  border-right: 1px solid var(--border-subtle, #45475a);
  padding-right: 8px;
  margin-right: 4px;
}

.toolbar-section.ai-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
  margin-left: auto;
}

.toolbar-button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #cdd6f4);
  height: 28px;
  min-width: 28px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0 4px;
}

.format-label {
  font-size: 10px;
  margin-left: 4px;
  font-weight: 500;
  color: var(--primary, #74c7ec);
}

.toolbar-button:hover {
  background: var(--bg-hover, #45475a);
  border-color: var(--border-color, #585b70);
}

.toolbar-button:active {
  background: var(--bg-active, #6c7086);
}

.toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.language-button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 0 8px;
  position: relative;
}

.language-name {
  font-size: 13px;
  margin-right: 4px;
}

.language-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-surface-2, #313244);
  border: 1px solid var(--border-color, #45475a);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 100;
  margin-top: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  border: none;
  color: var(--text-secondary, #cdd6f4);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.language-option:hover {
  background: var(--bg-hover, #45475a);
}

.language-option.active {
  background: var(--primary-transparent, rgba(116, 199, 236, 0.2));
  color: var(--primary, #74c7ec);
}

.right-actions {
  margin-left: auto;
}

.ai-assist-toolbar-button {
  background: linear-gradient(135deg, var(--primary, #4f8cff) 0%, var(--primary-light, #a78bfa) 100%) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px var(--primary-light, rgba(79, 140, 255, 0.2)) !important;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Main content area */
.code-editor-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.code-editor-main.with-terminal-bottom {
  flex-direction: column;
}

.code-editor-main.with-terminal-right {
  flex-direction: row;
}

/* Problem badge for toolbar */
.problem-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--error, #f38ba8);
  color: var(--text-on-error, #1e1e2e);
  font-size: 10px;
  font-weight: bold;
  margin-left: 4px;
}



/* Problems panel */
.code-editor-problems {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.problems-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle, #45475a);
}

.problems-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #cdd6f4);
}

.problem-counts {
  display: flex;
  gap: 8px;
}

.error-count, .warning-count, .info-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.problems-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.problems-list {
  display: flex;
  flex-direction: column;
}

.problem-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle, #45475a);
}

.problem-details {
  flex: 1;
}

.problem-message {
  font-size: 13px;
  color: var(--text-secondary, #cdd6f4);
  margin-bottom: 4px;
}

.problem-location {
  font-size: 12px;
  color: var(--text-tertiary, #a6adc8);
}

.problem-item.error .problem-message {
  color: var(--error, #f38ba8);
}

.problem-item.warning .problem-message {
  color: var(--warning, #f9e2af);
}

.problem-item.info .problem-message {
  color: var(--info, #89b4fa);
}

.empty-problems {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: var(--text-tertiary, #a6adc8);
}

.empty-problems p {
  margin-top: 12px;
  font-size: 13px;
}

/* Editor content area */
.code-editor-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
  padding-bottom: 25px; /* Account for status bar height + border */
}

.code-editor-content.with-terminal-bottom {
  flex: 1 1 auto;
}

.code-editor-content.with-terminal-right {
  flex: 1 1 auto;
}

.code-editor-wrapper {
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
  width: 100%;
  height: calc(100% - 25px); /* Subtract status bar height */
  box-sizing: border-box;
  position: relative;
}

/* Auto-save indicator */
.editor-auto-save-indicator {
  position: absolute;
  bottom: 40px;
  right: 20px;
  z-index: 100;
  background-color: var(--bg-surface-2, #313244);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary, #a6adc8);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Performance Metrics Overlay */
.performance-metrics-overlay {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 90;
  pointer-events: none;
}

.performance-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: rgba(49, 50, 68, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #a6adc8);
  border: 1px solid var(--border-subtle, #45475a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.performance-metrics .metric {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.performance-metrics .metric:not(:last-child) {
  border-right: 1px solid var(--border-subtle, #45475a);
  padding-right: 12px;
}

/* Large File Loading Status Bar - Non-intrusive */
.loading-status-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-surface-2, #313244);
  border-top: 1px solid var(--border-color, #45475a);
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-secondary, #a6adc8);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}

.loading-status-bar::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-color, #45475a);
  border-top: 1px solid var(--primary, #74c7ec);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Subtle collaboration cursor indicator */
.collaboration-cursor-indicator {
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.collaboration-cursor-indicator:hover {
  opacity: 1 !important;
}

/* Animation for the cursor indicator */
.collaboration-cursor-indicator span:first-child {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.editor-auto-save-indicator.saving {
  color: var(--text-primary, #cdd6f4);
}

.editor-auto-save-indicator.saved {
  color: var(--success, #a6e3a1);
}

.editor-auto-save-indicator.error {
  color: var(--error, #f38ba8);
}

/* OLD CODE EDITOR STATUS BAR DELETED - Now using unified collaboration footer */

.statusbar-button:hover {
  color: var(--text-secondary, #cdd6f4);
}

.statusbar-hint {
  margin-left: auto;
}

.inline-assistant-hint {
  font-style: italic;
  color: var(--text-tertiary, #a6adc8);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Monaco Error and Loading States */
.monaco-error-container,
.monaco-loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: var(--bg-surface-1, #1e1e2e);
}

.monaco-error,
.monaco-loading {
  text-align: center;
  padding: 40px;
  border-radius: var(--radius-md, 8px);
  background: var(--bg-surface-2, #313244);
  border: 1px solid var(--border-color, #45475a);
  max-width: 400px;
}

.monaco-error h3 {
  color: var(--error, #f38ba8);
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.monaco-error p {
  color: var(--text-secondary, #cdd6f4);
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.5;
}

.monaco-error button {
  background: var(--primary, #74c7ec);
  color: var(--text-on-primary, #1e1e2e);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease;
}

.monaco-error button:hover {
  background: var(--primary-hover, #89dceb);
}

.monaco-loading p {
  color: var(--text-secondary, #cdd6f4);
  margin: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.monaco-loading p::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #45475a);
  border-top: 2px solid var(--primary, #74c7ec);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Help panel */
.code-editor-help {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 90%;
  max-height: 80%;
  background: var(--bg-surface-2, #313244);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #45475a);
}

.help-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #cdd6f4);
}

.close-button {
  background: transparent;
  border: none;
  color: var(--text-tertiary, #a6adc8);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.close-button:hover {
  color: var(--text-primary, #cdd6f4);
}

.help-content {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.shortcuts-section {
  flex: 1;
  min-width: 200px;
}

.shortcuts-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary, #74c7ec);
  border-bottom: 1px solid var(--border-subtle, #45475a);
  padding-bottom: 6px;
}

.shortcuts-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shortcuts-section li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary, #cdd6f4);
}

.shortcuts-section kbd {
  background: var(--bg-surface-3, #45475a);
  border: 1px solid var(--border-color, #585b70);
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--border-color, #585b70);
  color: var(--text-primary, #cdd6f4);
  display: inline-block;
  font-size: 11px;
  font-family: 'Consolas', 'Courier New', monospace;
  line-height: 1;
  padding: 3px 5px;
  min-width: 20px;
  text-align: center;
}

/* Light theme overrides */
:root[data-theme="light"] .code-editor-layout {
  background-color: var(--bg-surface-1-light, #ffffff);
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] .code-editor-toolbar,
:root[data-theme="light"] .code-editor-statusbar,
:root[data-theme="light"] .code-editor-help {
  background-color: var(--bg-surface-2-light, #f5f5f5);
  border-color: var(--border-color-light, #e0e0e0);
}

:root[data-theme="light"] .toolbar-button,
:root[data-theme="light"] .statusbar-button {
  color: var(--text-secondary-light, #555555);
}

:root[data-theme="light"] .toolbar-button:hover {
  background-color: var(--bg-hover-light, #e8e8e8);
}

:root[data-theme="light"] .language-option.active {
  background-color: var(--primary-transparent-light, rgba(0, 120, 212, 0.1));
  color: var(--primary-light, #0078d4);
}

:root[data-theme="light"] .problem-item.error .problem-message {
  color: var(--error-light, #d83b01);
}

:root[data-theme="light"] .problem-item.warning .problem-message {
  color: var(--warning-light, #ffaa44);
}

:root[data-theme="light"] .problem-item.info .problem-message {
  color: var(--info-light, #0078d4);
}

/* Terminal styles */
.terminal-container {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface-1, #1e1e2e);
  border-top: 1px solid var(--border-color, #45475a);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.terminal-container.right {
  border-top: none;
  border-left: 1px solid var(--border-color, #45475a);
  position: relative;
  width: 300px;
  height: 100%;
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background-color: var(--bg-surface-2, #313244);
  border-bottom: 1px solid var(--border-color, #45475a);
  font-size: 12px;
  color: var(--text-secondary, #cdd6f4);
  height: 28px;
}

.terminal-controls {
  display: flex;
  gap: 4px;
}

.terminal-control-button {
  background: transparent;
  border: none;
  color: var(--text-tertiary, #a6adc8);
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.terminal-control-button:hover {
  background-color: var(--bg-hover, #45475a);
  color: var(--text-secondary, #cdd6f4);
}

.terminal-resize-handle {
  height: 6px;
  width: 100%;
  background-color: var(--bg-surface-2, #313244);
  cursor: ns-resize;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  border-top: 1px solid var(--border-color, #45475a);
  border-bottom: 1px solid var(--border-color, #45475a);
}

.terminal-resize-handle:hover {
  background-color: var(--primary, #74c7ec);
  opacity: 0.5;
}

.terminal-container .terminal {
  flex: 1;
  padding: 4px;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

.toolbar-section.terminal-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar-button.active {
  background-color: var(--primary-transparent, rgba(116, 199, 236, 0.2));
  color: var(--primary, #74c7ec);
  border-color: var(--primary, #74c7ec);
}

.auto-save-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--success, #a6e3a1);
}

/* AI Assist button styling */
.toolbar-section.ai-actions {
  margin-left: auto;
}

.ai-assist-toolbar-button {
  background: linear-gradient(135deg, var(--accent, #4f8cff) 0%, var(--accent-secondary, #a78bfa) 100%) !important;
  color: white !important;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px !important;
  width: auto !important;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(79, 140, 255, 0.2);
}

.ai-assist-toolbar-button:hover {
  box-shadow: 0 4px 12px rgba(79, 140, 255, 0.3) !important;
  transform: translateY(-1px);
}

.ai-assist-toolbar-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(79, 140, 255, 0.2) !important;
}

.inline-assist-button {
  background-color: var(--bg-surface-3, #45475a);
  color: var(--text-primary, #cdd6f4);
  margin-left: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.inline-assist-button:hover {
  background-color: var(--bg-surface-4, #585b70);
  transform: translateY(-1px);
}

.inline-assist-button:active {
  transform: translateY(0);
}

/* Light theme terminal overrides */
:root[data-theme="light"] .terminal-container,
:root[data-theme="light"] .terminal-header {
  background-color: var(--bg-surface-1-light, #ffffff);
  border-color: var(--border-color-light, #e0e0e0);
}

:root[data-theme="light"] .terminal-header {
  background-color: var(--bg-surface-2-light, #f5f5f5);
}

:root[data-theme="light"] .terminal-control-button {
  color: var(--text-tertiary-light, #777777);
}

:root[data-theme="light"] .terminal-control-button:hover {
  background-color: var(--bg-hover-light, #e8e8e8);
  color: var(--text-secondary-light, #555555);
}

:root[data-theme="light"] .terminal-resize-handle {
  background-color: var(--bg-surface-2-light, #f5f5f5);
}

:root[data-theme="light"] .toolbar-button.active {
  background-color: var(--primary-transparent-light, rgba(0, 120, 212, 0.1));
  color: var(--primary-light, #0078d4);
  border-color: var(--primary-light, #0078d4);
}

:root[data-theme="light"] .auto-save-indicator {
  background-color: var(--success-light, #107c10);
}

:root[data-theme="light"] .ai-assist-toolbar-button {
  background: linear-gradient(135deg, var(--accent-light, #0078d4) 0%, var(--accent-secondary-light, #6b69d6) 100%) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.2);
}

:root[data-theme="light"] .ai-assist-toolbar-button:hover {
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3) !important;
}

:root[data-theme="light"] .inline-assist-button {
  background-color: var(--bg-surface-3-light, #e0e0e0);
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] .inline-assist-button:hover {
  background-color: var(--bg-surface-4-light, #d0d0d0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .code-editor-toolbar {
    flex-wrap: wrap;
  }

  .code-editor-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .code-editor-sidebar.visible {
    transform: translateX(0);
  }

  .help-content {
    flex-direction: column;
  }
}

/* Collaborative cursors for Monaco editor */
.monaco-collaboration-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  width: 2px;
  height: 18px;
  animation: blink 1s infinite;
}

.monaco-collaboration-cursor-label {
  position: absolute;
  top: -20px;
  left: -1px;
  font-size: 10px;
  font-weight: 500;
  color: white;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1001;
  opacity: 0.9;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}.simple-terminal {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
}

.simple-terminal.light {
  background-color: var(--bg-surface-1-light, #ffffff);
  color: var(--text-primary-light, #333333);
}

.terminal-output {
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.terminal-line {
  display: flex;
  align-items: center;
  min-height: 20px;
}

.terminal-input {
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 1px;
  outline: none;
  caret-color: var(--primary, #74c7ec);
}

.simple-terminal.light .terminal-input {
  caret-color: var(--primary-light, #0078d4);
}

/* Scrollbar styles */
.terminal-output::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.terminal-output::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color, #45475a);
  border-radius: 4px;
}

.terminal-output::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color, #1e1e2e);
}

.simple-terminal.light .terminal-output::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color-light, #cccccc);
}

.simple-terminal.light .terminal-output::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color-light, #f5f5f5);
}

/* Cloud terminal styles */
.simple-terminal.cloud-enabled {
  background-color: var(--bg-surface-1, #1a1b26);
  color: var(--text-primary, #a9b1d6);
  border-top: 2px solid var(--primary, #7aa2f7);
}

.simple-terminal.cloud-enabled.light {
  background-color: var(--bg-surface-1-light, #f0f4f9);
  color: var(--text-primary-light, #24292e);
  border-top: 2px solid var(--primary-light, #0366d6);
}

/* Command styling */
.terminal-command {
  color: var(--primary, #7aa2f7);
  font-weight: bold;
}

.terminal-error {
  color: var(--error, #f7768e);
}

.terminal-success {
  color: var(--success, #9ece6a);
}

.terminal-warning {
  color: var(--warning, #e0af68);
}

.terminal-info {
  color: var(--info, #7dcfff);
}

/* Ensure terminal sticks to bottom */
.terminal-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
/**
 * Standardized Code Editor Styles
 * 
 * Container for the code editor with collapsible toolbars
 */

.standardized-code-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-surface-1, #1e1e1e);
  overflow: hidden;
}

.standardized-code-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.modeling-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface-1, #181a20);
  color: var(--text-primary, #e6e6e6);
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-width: 0;
  min-height: 0;
}

.modeling-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface-2, #23272e);
  border-bottom: 1.5px solid var(--border-color, #2a2e36);
  padding: 0 28px;
  height: 54px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  z-index: 10;
}

.modeling-title {
  font-size: 1.18em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent, #4f8cff);
}

.modeling-header-actions {
  display: flex;
  gap: 10px;
}

.modeling-header-actions button,
.modeling-header-actions label {
  background: none;
  border: none;
  color: var(--text-secondary, #b0b0b0);
  font-size: 1.1em;
  cursor: pointer;
  border-radius: 5px;
  padding: 6px 10px;
  transition: background 0.15s, color 0.15s;
  outline: none;
  display: flex;
  align-items: center;
}

.modeling-header-actions button:hover,
.modeling-header-actions label:hover {
  background: var(--bg-hover, #232b3b);
  color: var(--accent, #4f8cff);
}

.modeling-header-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modeling-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

/* Old modeling-toolbar styles removed - tools moved to standardized top toolbars */

.modeling-viewport {
  flex: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: flex;
  background: var(--bg-surface-1, #181a20);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
  overflow: hidden;
}

.modeling-canvas {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 0 0 18px 18px;
  outline: none;
  min-width: 0;
  min-height: 0;
}

.modeling-tip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--bg-surface-2, rgba(30,30,46,0.92));
  color: var(--text-secondary, #cdd6f4);
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 14px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 10;
}

.modeling-sidebar {
  width: 320px;
  background: var(--bg-surface-2, #23272e);
  border-left: 1.5px solid var(--border-color, #2a2e36);
  box-shadow: -2px 0 12px rgba(0,0,0,0.06);
  border-radius: 0 0 18px 0;
  padding: 0 24px 24px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  z-index: 20;
  transition: box-shadow 0.2s;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 10px 0;
  font-size: 1.08em;
  font-weight: 500;
  color: var(--accent, #4f8cff);
}

.sidebar-header button {
  background: none;
  border: none;
  color: var(--text-secondary, #b0b0b0);
  font-size: 1.2em;
  cursor: pointer;
  border-radius: 5px;
  padding: 4px 8px;
  transition: background 0.15s, color 0.15s;
}

.sidebar-header button:hover {
  background: var(--bg-hover, #232b3b);
  color: var(--accent, #4f8cff);
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

.sidebar-content label {
  font-size: 0.98em;
  color: var(--text-primary, #e6e6e6);
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-content input[type="text"],
.sidebar-content input[type="number"] {
  background: var(--bg-surface-3, #232b3b);
  border: 1.5px solid var(--border-color, #2a2e36);
  color: var(--text-primary, #e6e6e6);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 1em;
  margin-top: 2px;
  outline: none;
  transition: border 0.15s, box-shadow 0.15s;
}

.sidebar-content input[type="text"]:focus,
.sidebar-content input[type="number"]:focus {
  border: 1.5px solid var(--accent, #4f8cff);
  box-shadow: 0 2px 8px rgba(79,140,255,0.10);
}

.sidebar-content input[type="color"] {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  margin-top: 2px;
}

.sidebar-content input[type="range"] {
  background: var(--bg-surface-3, #232b3b);
  border: none;
  border-radius: 5px;
  height: 6px;
  outline: none;
  margin-top: 4px;
  cursor: pointer;
}

.sidebar-content input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #4f8cff);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sidebar-content input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #4f8cff);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sidebar-content input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #4f8cff);
  margin-top: 4px;
  cursor: pointer;
}

.vector-inputs {
  display: flex;
  gap: 8px;
}

.sidebar-delete {
  background: var(--accent, #4f8cff);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 7px 0;
  font-size: 1em;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(79,140,255,0.10);
}

.sidebar-delete:hover {
  background: var(--accent-hover, #3576d1);
}

.sidebar-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-surface-2, #23272e);
  color: var(--accent, #4f8cff);
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 8px 12px;
  font-size: 1.2em;
  cursor: pointer;
  box-shadow: -2px 0 8px rgba(0,0,0,0.06);
  z-index: 30;
  transition: background 0.15s, color 0.15s;
}

.sidebar-toggle:hover {
  background: var(--bg-hover, #232b3b);
  color: #fff;
}

/* OLD MODELING STATUS BAR DELETED - Now using unified collaboration footer */

@media (max-width: 1200px) {
  .modeling-sidebar {
    width: 220px;
    padding: 0 12px 12px 12px;
  }
}

@media (max-width: 900px) {
  .modeling-header {
    padding-left: 10px;
    padding-right: 10px;
  }
  .modeling-sidebar {
    width: 100vw;
    max-width: 100vw;
    position: absolute;
    right: 0;
    top: 54px;
    z-index: 100;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  }
}

@media (max-width: 700px) {
  .modeling-header {
    flex-direction: column;
    gap: 6px;
    height: auto;
    padding: 8px 4px;
  }
  .modeling-sidebar {
    top: 0;
    border-radius: 0 0 18px 18px;
  }
} /**
 * Standardized Modeling Editor Styles
 */

.standardized-modeling-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-surface-1, #1e1e1e);
  overflow: hidden;
}

.standardized-modeling-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* Professional Audio Editor Styles */

.professional-audio-editor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--editor-bg-primary, #0f0f0f);
  color: var(--editor-text-primary, #ffffff);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  position: relative;
}

/* Transport Controls */
.transport-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-surface-2, #2d2d2d);
  border-bottom: 1px solid var(--border-color, #404040);
  min-height: 60px;
}

.playback-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.transport-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 6px;
  background: var(--bg-surface-3, #3d3d3d);
  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
}

.transport-btn:hover {
  background: var(--bg-surface-4, #4d4d4d);
  transform: translateY(-1px);
}

.transport-btn.play-btn {
  background: var(--accent-primary, #007acc);
  width: 48px;
  height: 48px;
}

.transport-btn.play-btn:hover {
  background: var(--accent-primary-hover, #0086e6);
}

.time-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #cccccc);
}

.master-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.master-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary, #cccccc);
}

.volume-slider {
  width: 100px;
  height: 4px;
  background: var(--bg-surface-3, #3d3d3d);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-primary, #007acc);
  cursor: pointer;
}

/* Toolbar */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--bg-surface-2, #2d2d2d);
  border-bottom: 1px solid var(--border-color, #404040);
  flex-wrap: wrap;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-right: 1px solid var(--border-color, #404040);
}

.toolbar-section:last-child {
  border-right: none;
}

.toolbar-btn, .file-upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: var(--bg-surface-3, #3d3d3d);
  color: var(--text-primary, #ffffff);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.toolbar-btn:hover, .file-upload-btn:hover {
  background: var(--bg-surface-4, #4d4d4d);
}

.zoom-level {
  font-size: 12px;
  color: var(--text-secondary, #cccccc);
  min-width: 40px;
  text-align: center;
}

/* Main Editor Area */
.editor-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}



/* Track Headers */
.track-headers {
  width: 250px;
  background: var(--editor-bg-tertiary);
  border-right: 1px solid var(--editor-border);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.track-header {
  height: 80px;
  padding: 12px;
  border-bottom: 1px solid var(--border-color, #404040);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.track-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.track-name {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-primary, #ffffff);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 3px;
  flex: 1;
  margin-right: 8px;
}

.track-name:focus {
  outline: none;
  border-color: var(--accent-primary, #007acc);
  background: var(--bg-surface-3, #3d3d3d);
}

.track-controls {
  display: flex;
  gap: 4px;
}

.track-control-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 3px;
  background: var(--bg-surface-3, #3d3d3d);
  color: var(--text-secondary, #cccccc);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.track-control-btn:hover {
  background: var(--bg-surface-4, #4d4d4d);
}

.track-control-btn.active {
  background: var(--accent-primary, #007acc);
  color: white;
}

.track-control-btn.recording {
  background: #dc2626;
  color: white;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.track-volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.track-volume-slider {
  flex: 1;
  height: 3px;
  background: var(--bg-surface-3, #3d3d3d);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.track-volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-primary, #007acc);
  cursor: pointer;
}

.volume-value {
  font-size: 11px;
  color: var(--text-secondary, #cccccc);
  min-width: 30px;
  text-align: right;
}

.remove-track-btn {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-secondary, #cccccc);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.remove-track-btn:hover {
  background: #dc2626;
  color: white;
}

/* Timeline Area - Match Video Editor Structure */
.audio-editor-timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--editor-bg-primary);
  overflow: hidden;
  position: relative;
}

.timeline-header {
  height: 40px;
  background: var(--editor-bg-secondary);
  border-bottom: 1px solid var(--editor-border);
  position: relative;
  overflow: hidden;
  display: flex;
  z-index: 10;
}

.timeline-ruler {
  height: 30px;
  background: var(--editor-bg-secondary);
  border-bottom: 1px solid var(--editor-border);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex: 1;
}

.ruler-content {
  position: relative;
  height: 100%;
}

.ruler-mark {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ruler-line {
  width: 1px;
  height: 15px;
  background: var(--border-color, #404040);
}

.ruler-label {
  font-size: 10px;
  color: var(--text-secondary, #cccccc);
  margin-top: 2px;
  font-family: 'Courier New', monospace;
}

/* Tracks Container - Match Video Editor */
.timeline-tracks-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--editor-bg-primary);
  min-height: 200px;
}

.timeline-track {
  display: flex;
  border-bottom: 1px solid var(--editor-border);
  min-height: 60px;
  background: var(--editor-bg-surface);
  transition: background-color 0.2s ease;
}

.timeline-track:hover {
  background: var(--editor-bg-secondary);
}

.track-header {
  width: 200px;
  background: var(--editor-bg-tertiary);
  border-right: 1px solid var(--editor-border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 20;
}

.track-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.track-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--editor-text-primary);
  margin: 0;
}

.track-type {
  font-size: 9px;
  color: var(--editor-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.track-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  position: relative;
  z-index: 50;
}

.track-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: var(--editor-bg-surface);
  border: 1px solid var(--editor-border);
  border-radius: 4px;
  color: var(--editor-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  min-width: 24px;
  height: 24px;
  position: relative;
  z-index: 51;
}

.track-controls button:hover {
  background: var(--editor-bg-secondary);
  color: var(--editor-text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.track-controls button.active {
  background: var(--editor-accent);
  color: white;
  border-color: var(--editor-accent);
  box-shadow: 0 0 8px rgba(0, 122, 204, 0.3);
}

.track-delete {
  color: #ff6b6b !important;
}

.track-delete:hover {
  background: #ff6b6b !important;
  color: white !important;
  border-color: #ff6b6b !important;
}

.timeline-container {
  flex: 1;
  overflow: auto;
  position: relative;
  background: var(--editor-bg-surface);
}

.timeline-content {
  position: relative;
  height: 100%;
  min-height: 100%;
}

.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff4444;
  z-index: 100;
  pointer-events: none;
}

/* Track Content - Match Video Editor */
.track-content {
  flex: 1;
  position: relative;
  background: var(--editor-bg-surface);
  overflow: hidden;
  min-height: inherit;
  border-radius: 0 4px 4px 0;
}

.track-drop-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--editor-text-muted);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  text-align: center;
  padding: 8px 16px;
  background: var(--editor-bg-tertiary);
  border-radius: 6px;
  border: 1px dashed var(--editor-border);
}

.track-content:hover .track-drop-zone {
  opacity: 0.8;
  color: var(--editor-text-secondary);
}

.track-lane {
  height: 80px;
  border-bottom: 1px solid var(--editor-border);
  position: relative;
  overflow: hidden;
  background: var(--editor-bg-surface);
  display: flex;
  align-items: center;
}

/* Timeline Clips - Match Video Editor */
.timeline-clip {
  position: absolute;
  top: 8px;
  height: calc(100% - 16px);
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 6px;
  min-width: 20px;
  overflow: hidden;
  transition: all 0.2s ease;
  user-select: none;
}

.timeline-clip:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.timeline-clip.selected {
  border-color: var(--editor-accent);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--editor-accent);
}

.clip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}

.clip-name {
  font-size: 11px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.clip-duration {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-mono);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.clip-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 2px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.timeline-clip:hover .clip-delete {
  opacity: 1;
}

.clip-delete:hover {
  background: var(--destructive);
}

.audio-clip {
  position: absolute;
  top: 8px;
  bottom: 8px;
  border-radius: 4px;
  cursor: grab;
  transition: all 0.2s ease;
  overflow: hidden;
  border: 2px solid transparent;
  user-select: none;
}

.audio-clip:active {
  cursor: grabbing;
}

.audio-clip.dragging {
  cursor: grabbing;
  opacity: 0.8;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 1000 !important;
  transition: none; /* Disable transitions while dragging */
}

.audio-clip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.audio-clip.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px #ffffff;
}

.clip-content {
  padding: 4px 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.clip-name {
  font-size: 10px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.clip-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  font-family: 'Courier New', monospace;
  line-height: 1;
}

.clip-waveform {
  display: flex;
  align-items: end;
  gap: 1px;
  height: 30px;
  overflow: hidden;
}

.waveform-bar {
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  min-height: 2px;
  transition: all 0.1s ease;
}

/* Drop indicator */
.drop-indicator {
  background: var(--accent-primary, #007acc) !important;
  box-shadow: 0 0 8px var(--accent-primary, #007acc);
  animation: pulse-drop 0.8s infinite;
}

@keyframes pulse-drop {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Drag and drop states */
.track-lane.drag-over {
  background: rgba(0, 122, 204, 0.1) !important;
  border: 2px dashed var(--accent-primary, #007acc) !important;
}



/* Scrollbar Styling */
.timeline-container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.timeline-container::-webkit-scrollbar-track {
  background: var(--bg-surface-2, #2d2d2d);
}

.timeline-container::-webkit-scrollbar-thumb {
  background: var(--bg-surface-4, #4d4d4d);
  border-radius: 6px;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
  background: var(--bg-surface-5, #5d5d5d);
}

/* Theme consistency with application */
.professional-audio-editor {
  /* Use CSS variables from the main theme */
  --bg-surface-1: var(--background, #1e1e1e);
  --bg-surface-2: var(--background-secondary, #2d2d2d);
  --bg-surface-3: var(--background-hover, #3d3d3d);
  --bg-surface-4: var(--background-active, #4d4d4d);
  --bg-surface-5: var(--background-accent, #5d5d5d);
  --text-primary: var(--foreground, #ffffff);
  --text-secondary: var(--text-secondary, #cccccc);
  --border-color: var(--border, #404040);
  --accent-primary: var(--primary, #007acc);
  --accent-primary-hover: var(--primary-hover, #0086e6);
}

/* Dark theme adjustments */
.professional-audio-editor.dark {
  --bg-surface-1: var(--background, #0d1117);
  --bg-surface-2: var(--background-secondary, #161b22);
  --bg-surface-3: var(--background-hover, #21262d);
  --bg-surface-4: var(--background-active, #30363d);
  --bg-surface-5: var(--background-accent, #484f58);
  --text-primary: var(--foreground, #f0f6fc);
  --text-secondary: var(--text-secondary, #8b949e);
  --border-color: var(--border, #30363d);
  --accent-primary: var(--primary, #58a6ff);
  --accent-primary-hover: var(--primary-hover, #79c0ff);
}

/* Light theme */
.professional-audio-editor.light {
  --bg-surface-1: var(--background, #ffffff);
  --bg-surface-2: var(--background-secondary, #f6f8fa);
  --bg-surface-3: var(--background-hover, #eaeef2);
  --bg-surface-4: var(--background-active, #d0d7de);
  --bg-surface-5: var(--background-accent, #afb8c1);
  --text-primary: var(--foreground, #24292f);
  --text-secondary: var(--text-secondary, #656d76);
  --border-color: var(--border, #d0d7de);
  --accent-primary: var(--primary, #0969da);
  --accent-primary-hover: var(--primary-hover, #0860ca);
}

/* Responsive design */
@media (max-width: 768px) {
  .transport-controls {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }

  .editor-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .toolbar-section {
    border-right: none;
    border-bottom: 1px solid var(--border-color, #404040);
    padding: 4px 0;
    justify-content: center;
  }

  .track-headers {
    width: 200px;
  }

  .track-header {
    height: 60px;
    padding: 8px;
  }

  .track-lane {
    height: 60px;
  }
}

/* Tooltips */
.toolbar-btn[title]:hover::after,
.transport-btn[title]:hover::after,
.track-control-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface-5, #484f58);
  color: var(--text-primary, #ffffff);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 1000;
  margin-bottom: 4px;
}

/* Loading states */
.audio-clip.loading {
  opacity: 0.6;
  animation: loading-pulse 1.5s infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}

/* Selection and focus states */
.timeline-container:focus {
  outline: 2px solid var(--accent-primary, #007acc);
  outline-offset: -2px;
}

.track-name:focus {
  box-shadow: 0 0 0 2px var(--accent-primary, #007acc);
}

/* Improved waveform visualization */
.clip-waveform {
  display: flex;
  align-items: end;
  gap: 1px;
  height: 30px;
  overflow: hidden;
  padding: 2px;
}

.waveform-bar {
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  min-height: 2px;
  transition: all 0.1s ease;
}

.audio-clip:hover .waveform-bar {
  background: rgba(255, 255, 255, 1);
}

/* Performance optimizations */
.timeline-content {
  will-change: transform;
}

.playhead {
  will-change: transform;
}

.audio-clip {
  will-change: transform;
}

/* Track Management - Match Video Editor */
.track-management {
  padding: 12px 16px;
  background: var(--editor-bg-secondary);
  border-top: 1px solid var(--editor-border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 40;
  min-height: 60px;
}

.add-track-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--editor-bg-surface);
  border: 1px solid var(--editor-border);
  border-radius: 6px;
  color: var(--editor-text-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.add-track-btn:hover {
  background: var(--editor-bg-tertiary);
  color: var(--editor-text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.add-track-btn.voice {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid #8b5cf6;
  color: #8b5cf6;
  border-left: 4px solid #8b5cf6;
}

.add-track-btn.music {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid #f59e0b;
  color: #f59e0b;
  border-left: 4px solid #f59e0b;
}

.add-track-btn.master {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid #dc2626;
  color: #dc2626;
  border-left: 4px solid #dc2626;
}

.add-track-btn.audio {
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid #059669;
  color: #059669;
  border-left: 4px solid #059669;
}
/* Enhanced Editor Theme - Shared styles for all editors */

:root {
  /* Editor Colors */
  --editor-bg-primary: #1a1a1a;
  --editor-bg-secondary: #252526;
  --editor-bg-tertiary: #2d2d2d;
  --editor-bg-surface: #1e1e1e;
  --editor-border: #374151;
  --editor-border-light: #4a5568;
  --editor-text-primary: #f8f8f2;
  --editor-text-secondary: #a8a8a8;
  --editor-text-muted: #6b7280;
  --editor-accent: #007acc;
  --editor-accent-hover: #0066aa;
  
  /* Track Colors */
  --track-video: #3b82f6;
  --track-video-bg: rgba(59, 130, 246, 0.1);
  --track-audio: #10b981;
  --track-audio-bg: rgba(16, 185, 129, 0.1);
  --track-voice: #8b5cf6;
  --track-voice-bg: rgba(139, 92, 246, 0.1);
  --track-music: #f59e0b;
  --track-music-bg: rgba(245, 158, 11, 0.1);
  --track-text: #f59e0b;
  --track-text-bg: rgba(245, 158, 11, 0.1);
  --track-image: #dc2626;
  --track-image-bg: rgba(220, 38, 38, 0.1);
  --track-master: #dc2626;
  --track-master-bg: rgba(220, 38, 38, 0.1);
  
  /* Timeline Colors */
  --timeline-playhead: #ff4444;
  --timeline-selection: rgba(67, 97, 238, 0.2);
  --timeline-grid: rgba(255, 255, 255, 0.05);
  --timeline-marker: #fbbf24;
  
  /* Light theme overrides */
  --editor-bg-primary-light: #ffffff;
  --editor-bg-secondary-light: #f8f9fa;
  --editor-bg-tertiary-light: #e9ecef;
  --editor-bg-surface-light: #f5f5f5;
  --editor-border-light: #dee2e6;
  --editor-border-light-light: #ced4da;
  --editor-text-primary-light: #212529;
  --editor-text-secondary-light: #6c757d;
  --editor-text-muted-light: #9ca3af;
  --timeline-grid-light: rgba(0, 0, 0, 0.05);
}

/* Theme-aware color application */
[data-theme="light"] {
  --editor-bg-primary: var(--editor-bg-primary-light);
  --editor-bg-secondary: var(--editor-bg-secondary-light);
  --editor-bg-tertiary: var(--editor-bg-tertiary-light);
  --editor-bg-surface: var(--editor-bg-surface-light);
  --editor-border: var(--editor-border-light);
  --editor-border-light: var(--editor-border-light-light);
  --editor-text-primary: var(--editor-text-primary-light);
  --editor-text-secondary: var(--editor-text-secondary-light);
  --editor-text-muted: var(--editor-text-muted-light);
  --timeline-grid: var(--timeline-grid-light);
}

/* Unified Track Styles */
.unified-track {
  position: relative;
  border-bottom: 1px solid var(--editor-border);
  background-color: var(--editor-bg-surface);
  transition: all 0.2s ease;
  overflow: hidden;
  display: flex;
  min-height: 60px; /* Ensure minimum height for visibility */
}

.unified-track:hover {
  background-color: var(--editor-bg-tertiary);
}

.unified-track.selected {
  background-color: var(--timeline-selection);
  border-color: var(--editor-accent);
}

.unified-track.video-track {
  background-color: var(--track-video-bg);
  border-left: 3px solid var(--track-video);
  min-height: 80px;
}

.unified-track.audio-track {
  background-color: var(--track-audio-bg);
  border-left: 3px solid var(--track-audio);
  min-height: 60px;
}

.unified-track.text-track {
  background-color: var(--track-text-bg);
  border-left: 3px solid var(--track-text);
  min-height: 40px;
}

.unified-track.image-track {
  background-color: var(--track-image-bg);
  border-left: 3px solid var(--track-image);
  min-height: 60px;
}

.unified-track.voice-track {
  background-color: var(--track-voice-bg);
  border-left: 3px solid var(--track-voice);
  min-height: 60px;
}

.unified-track.music-track {
  background-color: var(--track-music-bg);
  border-left: 3px solid var(--track-music);
  min-height: 60px;
}

.unified-track.master-track {
  background-color: var(--track-master-bg);
  border-left: 3px solid var(--track-master);
  min-height: 100px;
}

/* Enhanced drag and drop feedback */
.unified-track.drag-over,
.track-content.drag-over {
  background: linear-gradient(135deg, var(--editor-accent, #007acc) 0%, transparent 100%) !important;
  border: 2px dashed var(--editor-accent, #007acc) !important;
  border-radius: 8px;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 122, 204, 0.2);
  transition: all 0.2s ease;
}

.track-drop-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--editor-text-muted, #6b7280);
  font-size: 14px;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  text-align: center;
  white-space: nowrap;
}

.track-content:hover .track-drop-zone,
.unified-track:hover .track-drop-zone {
  opacity: 1;
}

/* Clip dragging states */
.timeline-clip.dragging {
  opacity: 0.8;
  transform: scale(1.05);
  z-index: 1000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  transition: none;
}

.timeline-clip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Track Header Styles */
.unified-track-header {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background-color: var(--editor-bg-tertiary);
  border-right: 1px solid var(--editor-border);
  border-bottom: 1px solid var(--editor-border);
  gap: 6px;
  min-height: 60px;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.unified-track-header .track-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--editor-text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unified-track-header .track-type {
  font-size: 10px;
  color: var(--editor-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.unified-track-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.unified-track-control {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--editor-text-secondary);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.unified-track-control:hover {
  background-color: var(--editor-bg-secondary);
  color: var(--editor-text-primary);
}

.unified-track-control.active {
  background-color: var(--editor-accent);
  color: white;
}

/* Track Content Area */
.unified-track-content {
  flex: 1;
  position: relative;
  height: 100%;
  overflow: hidden;
  min-height: inherit;
  background-color: inherit;
}

/* Clip Styles */
.unified-clip {
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.unified-clip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.unified-clip.selected {
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--editor-accent);
}

.unified-clip.dragging {
  cursor: grabbing;
  opacity: 0.8;
  transform: scale(1.02);
  z-index: 100;
}

.unified-clip.video-clip {
  background: linear-gradient(90deg, var(--track-video), #1d4ed8);
}

.unified-clip.audio-clip {
  background: linear-gradient(90deg, var(--track-audio), #059669);
}

.unified-clip.text-clip {
  background: linear-gradient(90deg, var(--track-text), #d97706);
}

.unified-clip.image-clip {
  background: linear-gradient(90deg, var(--track-image), #7c3aed);
}

.unified-clip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: white;
  font-size: 10px;
  font-weight: 500;
  overflow: hidden;
  width: 100%;
}

.unified-clip-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unified-clip-time {
  font-size: 9px;
  opacity: 0.8;
}

/* Resize Handles */
.unified-clip-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.unified-clip:hover .unified-clip-resize-handle {
  opacity: 1;
}

.unified-clip-resize-handle.left {
  left: 0;
}

.unified-clip-resize-handle.right {
  right: 0;
}

/* Playhead */
.unified-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--timeline-playhead);
  z-index: 50;
  pointer-events: none;
}

.unified-playhead::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -6px;
  width: 14px;
  height: 16px;
  background-color: var(--timeline-playhead);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* Waveform Styles */
.unified-waveform {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 4px;
  opacity: 0.6;
}

.unified-waveform-bar {
  background-color: currentColor;
  width: 2px;
  border-radius: 1px;
  transition: height 0.1s ease;
}

/* Drop Zone Styles */
.unified-track.drop-target {
  background-color: var(--timeline-selection);
  border: 2px dashed var(--editor-accent);
  border-radius: 6px;
}

.unified-track.drop-target::after {
  content: 'Drop media here';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--editor-accent);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

/* Timeline Grid */
.unified-timeline-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(var(--grid-size, 50px) - 1px),
    var(--timeline-grid) calc(var(--grid-size, 50px) - 1px),
    var(--timeline-grid) var(--grid-size, 50px)
  );
}
/**
 * Standardized Audio Editor Styles
 * 
 * Container for the audio editor with collapsible toolbars
 */

.standardized-audio-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-surface-1, #1e1e1e);
  overflow: hidden;
}

.standardized-audio-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* Professional Video Editor Styles */
.professional-video-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--editor-bg-primary);
  color: var(--editor-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Transport Controls */
.video-editor-transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--editor-bg-secondary);
  border-bottom: 1px solid var(--editor-border);
  min-height: 60px;
  backdrop-filter: blur(8px);
}

.transport-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.transport-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--editor-bg-tertiary);
  border: 1px solid var(--editor-border);
  border-radius: 6px;
  color: var(--editor-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.transport-controls button:hover {
  background: var(--editor-accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 122, 204, 0.3);
}

.time-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 14px;
  font-weight: 600;
  background: var(--editor-bg-surface);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--editor-border);
}

.time-display .separator {
  color: var(--editor-text-muted);
  margin: 0 4px;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--editor-bg-surface);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--editor-border);
}

.zoom-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--editor-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.zoom-controls button:hover {
  background: var(--editor-accent);
  color: white;
  transform: scale(1.05);
}

.zoom-level {
  font-size: 11px;
  color: var(--editor-text-muted);
  min-width: 45px;
  text-align: center;
  font-weight: 600;
  padding: 0 4px;
}

/* Timeline */
.video-editor-timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--editor-bg-primary);
}

.timeline-header {
  background: var(--editor-bg-secondary);
  border-bottom: 1px solid var(--editor-border);
  height: 40px;
  position: relative;
  backdrop-filter: blur(4px);
}

.timeline-ruler {
  position: relative;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--editor-bg-secondary), var(--editor-bg-tertiary));
}

.ruler-mark {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--editor-border-light);
  padding-left: 6px;
  display: flex;
  align-items: center;
}

.ruler-time {
  font-size: 10px;
  color: var(--editor-text-muted);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.playhead {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--timeline-playhead);
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
}

.playhead::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 14px;
  height: 14px;
  background: var(--timeline-playhead);
  border-radius: 50%;
  border: 2px solid var(--editor-bg-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}

.timeline-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.zoom-slider {
  width: 100px;
}

.timeline-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.timeline-tracks-header {
  width: 200px;
  background: var(--muted);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.timeline-tracks-area {
  flex: 1;
  overflow: auto;
  position: relative;
}

/* Timeline Ruler */
.timeline-ruler {
  height: 30px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.timeline-ruler-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: 2px 4px;
  font-size: 11px;
  color: var(--muted-foreground);
}

.timeline-ruler-tick.major {
  border-left-color: var(--foreground);
}

/* Playhead */
.timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary);
  z-index: 10;
  pointer-events: none;
}

.timeline-playhead::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 14px;
  height: 14px;
  background: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--background);
}

/* Tracks */
.timeline-tracks {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--editor-bg-primary);
  min-height: 200px; /* Ensure minimum height to prevent flashing */
  position: relative;
  z-index: 1;
}

.timeline-track {
  display: flex;
  border-bottom: 1px solid var(--editor-border);
  min-height: 60px;
  background: var(--editor-bg-surface);
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 10;
  isolation: isolate;
}

.timeline-track:hover {
  background: var(--editor-bg-secondary);
}

.track-header {
  width: 200px;
  background: var(--editor-bg-tertiary);
  border-right: 1px solid var(--editor-border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 100;
  isolation: isolate;
}

.track-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.track-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--editor-text-primary);
  margin: 0;
}

.track-type {
  font-size: 9px;
  color: var(--editor-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.track-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  position: relative;
  z-index: 200;
  isolation: isolate;
}

.track-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: var(--editor-bg-surface);
  border: 1px solid var(--editor-border);
  border-radius: 4px;
  color: var(--editor-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  min-width: 24px;
  height: 24px;
  position: relative;
  z-index: 300;
  isolation: isolate;
}

.track-controls button:hover {
  background: var(--editor-bg-secondary);
  color: var(--editor-text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.track-controls button.active {
  background: var(--editor-accent);
  color: white;
  border-color: var(--editor-accent);
  box-shadow: 0 0 8px rgba(0, 122, 204, 0.3);
}

.track-controls button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.track-controls button:focus {
  outline: 2px solid var(--editor-accent);
  outline-offset: 2px;
}

.track-delete {
  color: #ff6b6b !important;
}

.track-delete:hover {
  background: #ff6b6b !important;
  color: white !important;
  border-color: #ff6b6b !important;
}

.track-area {
  height: 80px;
  border-bottom: 1px solid var(--border);
  position: relative;
  background: var(--background);
}

.track-area.audio {
  height: 60px;
}

.track-area.drop-target {
  background: var(--accent);
  opacity: 0.5;
}

/* Clips */
.timeline-clip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 4px;
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: white;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  user-select: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.timeline-clip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.4);
}

.timeline-clip.selected {
  border: 2px solid var(--editor-accent);
  box-shadow: 0 0 0 1px var(--editor-accent), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.timeline-clip.dragging {
  cursor: grabbing;
  transform: rotate(2deg) scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.timeline-clip.clip-video {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
}

.timeline-clip.clip-audio {
  background: linear-gradient(135deg, #059669, #10b981);
}

.timeline-clip.clip-image {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

.timeline-clip.clip-text {
  background: linear-gradient(135deg, #7c2d12, #a16207);
}

/* Track drop zones */
.track-content.potential-drop-zone {
  background: rgba(var(--editor-accent-rgb), 0.1);
  border: 2px dashed var(--editor-accent);
}

.track-drop-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--editor-text-muted);
  font-size: 12px;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.track-content:hover .track-drop-zone {
  opacity: 0.8;
}

.clip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clip-trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background: transparent;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.clip-trim-handle.left {
  left: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.clip-trim-handle.right {
  right: 0;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
}

.clip-trim-handle:hover {
  background: rgba(255, 255, 255, 0.3);
}

.timeline-clip:hover .clip-trim-handle {
  background: rgba(255, 255, 255, 0.2);
}

.timeline-clip.selected .clip-trim-handle {
  background: rgba(255, 255, 255, 0.1);
}

.timeline-clip.selected .clip-trim-handle.left {
  border-left-color: var(--editor-accent);
}

.timeline-clip.selected .clip-trim-handle.right {
  border-right-color: var(--editor-accent);
}

/* Sidebar Panels */
.sidebar-header {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.sidebar-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 12px;
  border-bottom: 2px solid transparent;
}

.sidebar-tab:hover {
  color: var(--foreground);
}

.sidebar-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.sidebar-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}

/* Media Panel */
.media-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}

.media-item:hover {
  background: var(--accent);
}

.media-item.dragging {
  opacity: 0.5;
}

.media-thumbnail {
  width: 40px;
  height: 30px;
  background: var(--muted);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

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

.media-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-duration {
  font-size: 10px;
  color: var(--muted-foreground);
}

/* Responsive */
@media (max-width: 768px) {
  .video-editor-sidebar {
    width: 250px;
  }
  
  .timeline-tracks-header {
    width: 150px;
  }
}

/* Track Content */
.track-content {
  flex: 1;
  position: relative;
  background: var(--editor-bg-surface);
  overflow: hidden;
  min-height: inherit;
  border-radius: 0 4px 4px 0;
}

.track-drop-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--editor-text-muted);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  text-align: center;
  padding: 8px 16px;
  background: var(--editor-bg-tertiary);
  border-radius: 6px;
  border: 1px dashed var(--editor-border);
}

.track-content:hover .track-drop-zone {
  opacity: 0.8;
  color: var(--editor-text-secondary);
}

/* Track Type Colors */
.track-video .track-header {
  border-left: 4px solid var(--track-video);
  background: var(--track-video-bg);
}

.track-audio .track-header {
  border-left: 4px solid var(--track-audio);
  background: var(--track-audio-bg);
}

.track-image .track-header {
  border-left: 4px solid var(--track-image);
  background: var(--track-image-bg);
}

.track-text .track-header {
  border-left: 4px solid var(--track-text);
  background: var(--track-text-bg);
}

/* Clips */
.timeline-clip {
  position: absolute;
  top: 8px;
  height: calc(100% - 16px);
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 6px;
  min-width: 20px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.timeline-clip:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.timeline-clip.selected {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--accent);
}

.timeline-clip.dragging {
  opacity: 0.8;
  transform: scale(1.05) translateY(-2px);
  z-index: 1000 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  transition: none;
  cursor: grabbing !important;
}

.timeline-clip {
  cursor: grab;
  user-select: none;
}

.clip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}

.clip-name {
  font-size: 11px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clip-duration {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-mono);
}

.clip-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 2px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.timeline-clip:hover .clip-delete {
  opacity: 1;
}

.clip-delete:hover {
  background: var(--destructive);
}

/* Track Management */
.track-management {
  padding: 12px 16px;
  background: var(--editor-bg-secondary);
  border-top: 1px solid var(--editor-border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 100;
  min-height: 60px;
  flex-shrink: 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.add-track-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--editor-bg-surface);
  border: 1px solid var(--editor-border);
  border-radius: 6px;
  color: var(--editor-text-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  z-index: 50;
}

.add-track-btn:hover {
  background: var(--editor-bg-tertiary);
  color: var(--editor-text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.add-track-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.add-track-btn.video {
  border-left: 4px solid #4f46e5;
}

.add-track-btn.audio {
  border-left: 4px solid #059669;
}

.add-track-btn.image {
  border-left: 4px solid #dc2626;
}

.add-track-btn.text {
  border-left: 4px solid #7c2d12;
}

/* Unified Theme Variables */
.professional-video-editor {
  /* Editor Background Colors */
  --editor-bg-primary: #0f0f0f;
  --editor-bg-secondary: #1a1a1a;
  --editor-bg-tertiary: #262626;
  --editor-bg-surface: #1e1e1e;

  /* Editor Text Colors */
  --editor-text-primary: #ffffff;
  --editor-text-secondary: #e5e5e5;
  --editor-text-muted: #a1a1aa;

  /* Editor Border Colors */
  --editor-border: #404040;
  --editor-border-light: #525252;

  /* Editor Accent Colors */
  --editor-accent: #007acc;
  --editor-accent-hover: #1e90ff;

  /* Timeline Colors */
  --timeline-playhead: #ff4444;

  /* Track Type Colors */
  --track-video: #4f46e5;
  --track-video-bg: rgba(79, 70, 229, 0.1);
  --track-audio: #059669;
  --track-audio-bg: rgba(5, 150, 105, 0.1);
  --track-image: #dc2626;
  --track-image-bg: rgba(220, 38, 38, 0.1);
  --track-text: #7c2d12;
  --track-text-bg: rgba(124, 45, 18, 0.1);
}

/* Enhanced drag and drop styling */
.track-content.drag-over {
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(67, 97, 238, 0.05)) !important;
  border: 2px dashed var(--editor-accent) !important;
  border-radius: 8px;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(67, 97, 238, 0.2);
  transition: all 0.2s ease;
}

.track-drop-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--editor-text-muted);
  font-size: 14px;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.track-content:hover .track-drop-zone {
  opacity: 1;
}

/* Video preview container */
.video-preview-container {
  height: 300px;
  background: var(--editor-bg-surface);
  border-bottom: 1px solid var(--editor-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.video-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border-radius: 8px;
  margin: 16px;
  overflow: hidden;
}

.video-player {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--editor-text-muted);
  text-align: center;
  gap: 16px;
}

.video-placeholder h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.video-placeholder p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

/* Collaboration status */
.collaboration-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.collaboration-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--editor-text-secondary);
}

.collaboration-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.collaborators {
  display: flex;
  align-items: center;
  gap: 4px;
}

.collaborator-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--editor-bg-primary);
}

.collaborator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: var(--editor-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

.collaborator-count {
  font-size: 10px;
  color: var(--editor-text-muted);
  margin-left: 4px;
}

/* Light theme adjustments */
.light .professional-video-editor {
  --editor-bg-primary: #ffffff;
  --editor-bg-secondary: #f8f9fa;
  --editor-bg-tertiary: #e9ecef;
  --editor-bg-surface: #f1f3f4;

  --editor-text-primary: #1a1a1a;
  --editor-text-secondary: #4a4a4a;
  --editor-text-muted: #6b7280;

  --editor-border: #d1d5db;
  --editor-border-light: #e5e7eb;

  --editor-accent: #0066cc;
  --editor-accent-hover: #0052a3;

  --timeline-playhead: #dc2626;

  --track-video-bg: rgba(79, 70, 229, 0.05);
  --track-audio-bg: rgba(5, 150, 105, 0.05);
  --track-image-bg: rgba(220, 38, 38, 0.05);
  --track-text-bg: rgba(124, 45, 18, 0.05);
}
/**
 * Standardized Video Editor Styles
 * 
 * Container for the video editor with collapsible toolbars
 */

.standardized-video-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-surface-1, #1e1e1e);
  overflow: hidden;
}

.standardized-video-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* Enhanced Spreadsheet Editor Styles */

.enhanced-spreadsheet-editor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--background, #ffffff);
  color: var(--foreground, #000000);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  overflow: hidden;

  /* Default light theme colors */
  --warning: #ffc107;
  --warning-light: rgba(255, 193, 7, 0.2);
  --success: #28a745;
  --success-light: rgba(40, 167, 69, 0.2);
}

/* Enhanced Toolbar */
.enhanced-spreadsheet-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  background: var(--background-secondary, #f8f9fa);
  flex-wrap: wrap;
  min-height: 48px;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid var(--border, #e0e0e0);
}

.toolbar-section:last-child {
  border-right: none;
}

.toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--foreground, #000000);
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbar-button:hover:not(:disabled) {
  background: var(--background-hover, #e9ecef);
  border-color: var(--border-hover, #ced4da);
}

.toolbar-button:active {
  background: var(--background-active, #dee2e6);
}

.toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toolbar-button.active {
  background: var(--primary, #007bff);
  color: white;
  border-color: var(--primary, #007bff);
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.zoom-display {
  font-size: 12px;
  color: var(--text-secondary, #6c757d);
  min-width: 40px;
  text-align: center;
  padding: 4px 8px;
  background: var(--background, #ffffff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 4px;
}

/* Table actions toolbar section */
.table-actions {
  background: var(--background-secondary, #f8f9fa);
  border-radius: 4px;
  padding: 2px;
}

.table-actions .toolbar-button {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 36px;
  font-size: 11px;
}

/* Formula Bar */
.formula-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  background: var(--background, #ffffff);
}

.cell-reference {
  font-family: monospace;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-secondary, #6c757d);
  min-width: 60px;
  text-align: center;
  padding: 4px 8px;
  background: var(--background-secondary, #f8f9fa);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 4px;
}

.formula-input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 4px;
  background: var(--background, #ffffff);
  color: var(--foreground, #000000);
  font-family: monospace;
  font-size: 14px;
}

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

.formula-input-container {
  flex: 1;
  position: relative;
}

.formula-input.formula-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.formula-validation-error {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--background, #ffffff);
  border: 1px solid #dc3545;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 2px;
  font-size: 12px;
}

.error-icon {
  color: #dc3545;
  margin-right: 4px;
}

.error-message {
  color: #dc3545;
  font-weight: 500;
}

.error-suggestions {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e0e0e0);
}

.error-suggestions span {
  font-size: 11px;
  color: var(--text-muted, #6c757d);
  margin-right: 8px;
}

.suggestion-button {
  background: var(--background-secondary, #f8f9fa);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 3px;
  padding: 2px 6px;
  margin-right: 4px;
  font-size: 11px;
  color: var(--foreground, #000000);
  cursor: pointer;
  transition: all 0.15s ease;
}

.suggestion-button:hover {
  background: var(--background-hover, #e9ecef);
  border-color: var(--border-hover, #adb5bd);
}

/* Main Spreadsheet Area */
.spreadsheet-main {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.spreadsheet-container {
  position: relative;
  overflow: auto;
  height: 100%;
  width: 100%;
  flex: 1;
}

.spreadsheet-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  background: var(--background, #ffffff);
  display: table;
}

.spreadsheet-table.show-grid {
  border: 1px solid var(--border, #e0e0e0);
}

.spreadsheet-table.show-grid .spreadsheet-cell {
  border-right: 1px solid var(--border-light, #f0f0f0);
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}

/* Ensure proper table structure display */
.spreadsheet-table thead {
  display: table-header-group;
}

.spreadsheet-table tbody {
  display: table-row-group;
}

.spreadsheet-table tr {
  display: table-row;
}

.spreadsheet-table th,
.spreadsheet-table td {
  display: table-cell;
}

/* Headers */
.corner-header {
  width: 40px;
  height: 24px;
  background: var(--background-secondary, #f8f9fa);
  border-right: 1px solid var(--border, #e0e0e0);
  border-bottom: 1px solid var(--border, #e0e0e0);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}

.column-header {
  height: 24px;
  min-width: 40px;
  background: var(--background-secondary, #f8f9fa);
  border-right: 1px solid var(--border, #e0e0e0);
  border-bottom: 1px solid var(--border, #e0e0e0);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #6c757d);
  position: sticky;
  top: 0;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  padding: 0;
}

.column-header:hover {
  background: var(--background-hover, #e9ecef);
}

.column-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}

.column-resize-handle:hover {
  background: var(--primary, #007bff);
}

.column-resize-handle:active {
  background: var(--primary, #007bff);
}

.row-header {
  width: 40px;
  height: 24px;
  background: var(--background-secondary, #f8f9fa);
  border-right: 1px solid var(--border, #e0e0e0);
  border-bottom: 1px solid var(--border, #e0e0e0);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #6c757d);
  position: sticky;
  left: 0;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}

.row-header:hover {
  background: var(--background-hover, #e9ecef);
}

/* Cells */
.spreadsheet-cell {
  height: 24px;
  min-width: 40px;
  padding: 0;
  position: relative;
  background: var(--background, #ffffff);
  box-sizing: border-box;
}

.spreadsheet-cell.selected {
  background: var(--primary-light, rgba(0, 123, 255, 0.1));
  border: 2px solid var(--primary, #007bff) !important;
}

.spreadsheet-cell.in-range {
  background: var(--primary-light, rgba(0, 123, 255, 0.05));
  border: 1px solid var(--primary, #007bff);
}

.spreadsheet-cell.drag-source {
  background: var(--warning-light, rgba(255, 193, 7, 0.2));
  border: 2px dashed var(--warning, #ffc107) !important;
  opacity: 0.7;
  transform: scale(0.98);
  transition: all 0.2s ease;
}

.spreadsheet-cell.drop-target {
  background: var(--success-light, rgba(40, 167, 69, 0.2));
  border: 2px solid var(--success, #28a745) !important;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
  animation: pulse-drop-target 1s infinite;
}

@keyframes pulse-drop-target {
  0% {
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
  }
  50% {
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.5);
  }
  100% {
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
  }
}

.cell-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 2px 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--foreground, #000000);
}

.cell-input:focus {
  background: var(--background, #ffffff);
  box-shadow: inset 0 0 0 2px var(--primary, #007bff);
}

.cell-input:read-only {
  cursor: default;
}

/* Dark theme support */
.enhanced-spreadsheet-editor.dark {
  --background: #1e1e2e;
  --background-secondary: #313244;
  --background-hover: #45475a;
  --background-active: #585b70;
  --foreground: #cdd6f4;
  --text-secondary: #a6adc8;
  --border: #45475a;
  --border-light: #585b70;
  --border-hover: #6c7086;
  --primary: #89b4fa;
  --primary-light: rgba(137, 180, 250, 0.2);
  --warning: #f9e2af;
  --warning-light: rgba(249, 226, 175, 0.2);
  --success: #a6e3a1;
  --success-light: rgba(166, 227, 161, 0.2);
}

/* Responsive design */
@media (max-width: 768px) {
  .enhanced-spreadsheet-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
  }

  .toolbar-section {
    border-right: none;
    border-bottom: 1px solid var(--border, #e0e0e0);
    padding: 4px 0;
    justify-content: center;
  }

  .toolbar-section:last-child {
    border-bottom: none;
  }

  .formula-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .cell-reference {
    min-width: auto;
    text-align: left;
  }

  .column-header,
  .spreadsheet-cell {
    min-width: 50px;
  }
}

/* Scrollbar styling */
.spreadsheet-container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.spreadsheet-container::-webkit-scrollbar-track {
  background: var(--background-secondary, #f8f9fa);
}

.spreadsheet-container::-webkit-scrollbar-thumb {
  background: var(--border, #e0e0e0);
  border-radius: 6px;
}

.spreadsheet-container::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover, #ced4da);
}

/* Animation for smooth interactions */
.toolbar-button,
.cell-input,
.formula-input {
  transition: all 0.2s ease;
}

.spreadsheet-cell {
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

/* Drag and drop cursor styles */
.spreadsheet-cell[draggable="true"]:hover {
  cursor: grab;
}

.spreadsheet-cell[draggable="true"]:active {
  cursor: grabbing;
}

/* Range selection styling */
.spreadsheet-cell.in-range:not(.selected) {
  background: var(--primary-light, rgba(0, 123, 255, 0.05));
  border: 1px solid var(--primary, #007bff);
}

/* Improved drag source styling */
.spreadsheet-cell.drag-source {
  background: var(--warning-light, rgba(255, 193, 7, 0.2));
  border: 2px dashed var(--warning, #ffc107) !important;
  opacity: 0.7;
  transform: scale(0.98);
  transition: all 0.2s ease;
  z-index: 10;
  position: relative;
}

/* Enhanced drop target styling */
.spreadsheet-cell.drop-target {
  background: var(--success-light, rgba(40, 167, 69, 0.2));
  border: 2px solid var(--success, #28a745) !important;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
  animation: pulse-drop-target 1s infinite;
  z-index: 5;
  position: relative;
}

/* Prevent text selection during drag operations */
.enhanced-spreadsheet-editor.dragging {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Focus indicators for accessibility */
.toolbar-button:focus-visible {
  outline: 2px solid var(--primary, #007bff);
  outline-offset: 2px;
}

.cell-input:focus-visible {
  outline: none; /* Custom focus styling applied via box-shadow */
}

.formula-input:focus-visible {
  outline: none; /* Custom focus styling applied via box-shadow */
}

/* Context Menu */
.context-menu {
  background: var(--background, #ffffff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  min-width: 120px;
}

.context-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--foreground, #000000);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.context-menu-item:hover:not(:disabled) {
  background: var(--background-hover, #e9ecef);
}

.context-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/**
 * Standardized Spreadsheet Editor Styles
 */

.standardized-spreadsheet-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-surface-1, #1e1e1e);
  overflow: hidden;
}

.standardized-spreadsheet-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* Image Editor Styles */
.image-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: var(--background-primary, #1e1e2e);
  color: var(--text-primary, #cdd6f4);
}

.image-editor-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.image-editor-toolbar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--background-secondary, #181825);
  border-bottom: 1px solid var(--border-primary, #45475a);
  gap: 16px;
  flex-wrap: wrap;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-section:not(:last-child) {
  border-right: 1px solid var(--border-primary, #45475a);
  padding-right: 16px;
}

.toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: var(--text-primary, #cdd6f4);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.toolbar-button:hover {
  background-color: var(--background-hover, #313244);
}

.toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toolbar-button.active {
  background-color: var(--primary-color, #89b4fa);
  color: var(--primary-text, #1e1e2e);
}

.image-editor-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  position: relative;
  background-color: var(--background-tertiary, #11111b);
}

.drop-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  border: 2px dashed var(--border-primary, #45475a);
  border-radius: 8px;
  background-color: var(--background-secondary, #181825);
  color: var(--text-secondary, #a6adc8);
  text-align: center;
  width: 80%;
  max-width: 500px;
}

.upload-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--primary-color, #89b4fa);
  color: var(--primary-text, #1e1e2e);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.upload-button:hover {
  background-color: var(--primary-hover, #74c7ec);
}

.canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center;
}

.image-canvas {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.image-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  gap: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Light theme overrides */
.image-editor-container.light-theme {
  background-color: var(--background-primary-light, #f5f5f5);
  color: var(--text-primary-light, #333333);
}

.image-editor-container.light-theme .image-editor-toolbar {
  background-color: var(--background-secondary-light, #e5e5e5);
  border-bottom-color: var(--border-primary-light, #cccccc);
}

.image-editor-container.light-theme .toolbar-button {
  color: var(--text-primary-light, #333333);
}

.image-editor-container.light-theme .toolbar-button:hover {
  background-color: var(--background-hover-light, #d5d5d5);
}

.image-editor-container.light-theme .image-editor-content {
  background-color: var(--background-tertiary-light, #f0f0f0);
}

.image-editor-container.light-theme .drop-area {
  border-color: var(--border-primary-light, #cccccc);
  background-color: var(--background-secondary-light, #e5e5e5);
  color: var(--text-secondary-light, #666666);
}

/* AI Assistant integration */
.ai-actions {
  margin-left: auto;
}
/**
 * Standardized Image Editor Styles
 * 
 * Container for the image editor with collapsible toolbars
 */

.standardized-image-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-surface-1, #1e1e1e);
  overflow: hidden;
}

.standardized-image-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Creator Mode Section */
.creator-mode-section {
  padding: 8px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.image-editor-mode-selector {
  max-width: 400px;
}

.image-editor-creator-toolbar {
  margin: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    -webkit-animation: none;
            animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: -webkit-grab;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@-webkit-keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
/**
 * Dark Mode Styles for React Flow Components
 * 
 * Custom styling for MiniMap and Controls to support dark theme
 */

/* Dark mode for React Flow Controls */
.dark-mode .react-flow__controls {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .react-flow__controls-button {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}

.dark-mode .react-flow__controls-button:hover {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
}

.dark-mode .react-flow__controls-button svg {
  fill: #ffffff !important;
}

/* Dark mode for React Flow MiniMap */
.dark-mode .react-flow__minimap {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  border-radius: 8px !important;
}

.dark-mode .react-flow__minimap-mask {
  fill: rgba(31, 41, 55, 0.6) !important;
}

/* Dark mode for React Flow Background */
.dark-mode .react-flow__background {
  background: #111827;
}

.dark-mode .react-flow__background pattern circle {
  fill: #374151;
}

/* Dark mode for React Flow Edges - Enhanced theme-aware colors */
.dark-mode .react-flow__edge-path {
  stroke: #6b7280;
  stroke-width: 3px;
  filter: brightness(1.2); /* Slightly brighter for dark mode */
}

.dark-mode .react-flow__edge.selected .react-flow__edge-path {
  stroke: #60a5fa; /* Theme-consistent accent color for dark mode */
  stroke-width: 4px;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.4));
}

/* Light mode edge enhancements */
.light-mode .react-flow__edge-path,
:not(.dark-mode) .react-flow__edge-path {
  stroke-width: 3px;
  filter: brightness(0.9); /* Slightly darker for light mode */
}

.light-mode .react-flow__edge.selected .react-flow__edge-path,
:not(.dark-mode) .react-flow__edge.selected .react-flow__edge-path {
  stroke: #3b82f6; /* Theme-consistent accent color for light mode */
  stroke-width: 4px;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.3));
}

/* Dark mode for React Flow Handles */
.dark-mode .react-flow__handle {
  border: 2px solid #374151;
  background: #1f2937;
}

.dark-mode .react-flow__handle:hover {
  border-color: #4b5563;
}

.dark-mode .react-flow__handle.react-flow__handle-valid {
  border-color: #10b981;
}

.dark-mode .react-flow__handle.react-flow__handle-invalid {
  border-color: #ef4444;
}

/* Dark mode for React Flow Selection */
.dark-mode .react-flow__selection {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid #3b82f6;
}

/* Dark mode for React Flow Node Resizer */
.dark-mode .react-flow__resize-control {
  background: #374151;
  border: 1px solid #4b5563;
}

.dark-mode .react-flow__resize-control:hover {
  background: #4b5563;
}

/* Light mode overrides (ensure light mode works correctly) */
.light-mode .react-flow__controls,
:not(.dark-mode) .react-flow__controls {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.light-mode .react-flow__controls-button,
:not(.dark-mode) .react-flow__controls-button {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #000000 !important;
  fill: #000000 !important;
}

.light-mode .react-flow__controls-button:hover,
:not(.dark-mode) .react-flow__controls-button:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

.light-mode .react-flow__controls-button svg,
:not(.dark-mode) .react-flow__controls-button svg {
  fill: #000000 !important;
}

.light-mode .react-flow__minimap,
:not(.dark-mode) .react-flow__minimap {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
}

.light-mode .react-flow__minimap-mask,
:not(.dark-mode) .react-flow__minimap-mask {
  fill: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure proper z-index for controls and minimap */
.react-flow__controls {
  z-index: 1001;
}

.react-flow__minimap {
  z-index: 1001;
}

/* Custom styling for better visual hierarchy */
.react-flow__controls-button {
  transition: all 0.2s ease;
}

.react-flow__minimap {
  transition: all 0.2s ease;
}

/* Improve accessibility */
.react-flow__controls-button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Custom node selection styling */
.react-flow__node.selected {
  box-shadow: 0 0 0 2px #3b82f6;
}

.dark-mode .react-flow__node.selected {
  box-shadow: 0 0 0 2px #3b82f6, 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Edge selection styling */
.react-flow__edge.selected .react-flow__edge-path {
  stroke-width: 4px;
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}

/* Enhanced Controls styling */
.dark-mode .react-flow__controls {
  backdrop-filter: blur(8px);
  background: rgba(31, 41, 55, 0.9);
}

.light-mode .react-flow__controls,
:not(.dark-mode) .react-flow__controls {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.9);
}

/* Enhanced MiniMap styling */
.dark-mode .react-flow__minimap {
  backdrop-filter: blur(8px);
  background: rgba(31, 41, 55, 0.9) !important;
}

.light-mode .react-flow__minimap,
:not(.dark-mode) .react-flow__minimap {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Control button icons - ensure proper contrast */
.dark-mode .react-flow__controls-button svg path {
  fill: #ffffff !important;
}

.light-mode .react-flow__controls-button svg path,
:not(.dark-mode) .react-flow__controls-button svg path {
  fill: #374151 !important;
}

/* Improve button active states */
.dark-mode .react-flow__controls-button:active {
  background: #6b7280 !important;
  transform: scale(0.95);
}

.light-mode .react-flow__controls-button:active,
:not(.dark-mode) .react-flow__controls-button:active {
  background: #e5e7eb !important;
  transform: scale(0.95);
}

/* Add subtle animations */
.react-flow__controls-button {
  transition: all 0.15s ease;
}

.react-flow__minimap {
  transition: opacity 0.2s ease;
}

/* Improve minimap node visibility */
.dark-mode .react-flow__minimap-node {
  stroke-width: 1px;
  stroke: #4b5563;
}

.light-mode .react-flow__minimap-node,
:not(.dark-mode) .react-flow__minimap-node {
  stroke-width: 1px;
  stroke: #d1d5db;
}

/* Enhanced wire animations and visibility */
.dark-mode .react-flow__edge-path {
  transition: all 0.2s ease;
}

.light-mode .react-flow__edge-path,
:not(.dark-mode) .react-flow__edge-path {
  transition: all 0.2s ease;
}

/* Animated edges get enhanced visibility */
.dark-mode .react-flow__edge.animated .react-flow__edge-path {
  stroke-dasharray: 5;
  animation: dashdraw 0.5s linear infinite;
  filter: brightness(1.3) drop-shadow(0 0 4px currentColor);
}

.light-mode .react-flow__edge.animated .react-flow__edge-path,
:not(.dark-mode) .react-flow__edge.animated .react-flow__edge-path {
  stroke-dasharray: 5;
  animation: dashdraw 0.5s linear infinite;
  filter: brightness(0.8) drop-shadow(0 0 3px currentColor);
}

/* Keyframe for animated edges */
@keyframes dashdraw {
  to {
    stroke-dashoffset: -10;
  }
}

/* Enhanced hover effects for edges */
.dark-mode .react-flow__edge:hover .react-flow__edge-path {
  stroke-width: 4px;
  filter: brightness(1.4) drop-shadow(0 0 8px currentColor);
}

.light-mode .react-flow__edge:hover .react-flow__edge-path,
:not(.dark-mode) .react-flow__edge:hover .react-flow__edge-path {
  stroke-width: 4px;
  filter: brightness(0.7) drop-shadow(0 0 6px currentColor);
}
/* Enhanced Unified Workflow Editor - Modern 2025 UX */

.unified-workflow-editor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.98) 0%, rgba(30, 30, 46, 0.98) 100%);
  color: var(--text-primary);
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  position: relative;
  overflow: hidden;
  /* Entrance animation */
  animation: workflowEditorSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes workflowEditorSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated background pattern */
.unified-workflow-editor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: workflowBackgroundShift 12s ease-in-out infinite;
}

@keyframes workflowBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.unified-workflow-editor > * {
  position: relative;
  z-index: 1;
}

/* ===== ENHANCED WORKFLOW HEADER ===== */
.workflow-header {
  height: 60px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  /* Header entrance animation */
  animation: workflowHeaderSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

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

/* Header background pattern */
.workflow-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.workflow-header > * {
  position: relative;
  z-index: 1;
}

.workflow-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.workflow-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.workflow-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ===== ACTION BUTTONS ===== */
.workflow-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.workflow-action-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;
}

.workflow-action-btn:hover::before {
  left: 100%;
}

.workflow-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.workflow-action-btn:active {
  transform: translateY(0);
}

.workflow-action-btn.primary {
  background: var(--primary);
  color: var(--text-on-primary);
}

.workflow-action-btn.primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}

.workflow-action-btn.primary:disabled {
  background: var(--primary);
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.workflow-action-btn.danger {
  background: transparent;
  color: var(--error);
  border: 1px solid var(--error);
}

.workflow-action-btn.danger:hover {
  background: var(--error);
  color: var(--text-on-primary);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.workflow-action-btn.danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===== MAIN CONTENT AREA ===== */
.workflow-main-content {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* ===== NODE PALETTE ===== */
.workflow-node-palette {
  width: 220px;
  background: var(--bg-darker);
  border-right: 1px solid var(--border-color);
  padding: var(--space-sm);
  overflow-y: auto;
  flex-shrink: 0;
}

.workflow-node-palette h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-color);
}

/* ===== DRAGGABLE NODES ===== */
.workflow-draggable-node {
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-xs) 0;
  border-radius: var(--radius-md);
  cursor: grab;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: all 0.2s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.workflow-draggable-node::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.3s ease;
}

.workflow-draggable-node:hover::before {
  left: 100%;
}

.workflow-draggable-node:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.workflow-draggable-node:active {
  cursor: grabbing;
  transform: scale(0.98);
}

/* Node type colors */
.workflow-draggable-node.prompt {
  background: var(--primary);
  color: var(--text-on-primary);
}

.workflow-draggable-node.prompt:hover {
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}

.workflow-draggable-node.image-gen {
  background: #10b981;
  color: white;
}

.workflow-draggable-node.image-gen:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.workflow-draggable-node.video-gen {
  background: #f59e0b;
  color: white;
}

.workflow-draggable-node.video-gen:hover {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.workflow-draggable-node.audio-gen {
  background: #8b5cf6;
  color: white;
}

.workflow-draggable-node.audio-gen:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.workflow-draggable-node.code-gen {
  background: #f97316;
  color: white;
}

.workflow-draggable-node.code-gen:hover {
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.workflow-draggable-node.ai-chat {
  background: #06b6d4;
  color: white;
}

.workflow-draggable-node.ai-chat:hover {
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.workflow-draggable-node.organize {
  background: #84cc16;
  color: white;
}

.workflow-draggable-node.organize:hover {
  box-shadow: 0 4px 12px rgba(132, 204, 22, 0.3);
}

.workflow-draggable-node.utility {
  background: #6b7280;
  color: white;
}

.workflow-draggable-node.utility:hover {
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

/* ===== PALETTE DIVIDER ===== */
.workflow-palette-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-md) 0;
  position: relative;
}

.workflow-palette-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 1px;
  background: var(--primary);
}

/* ===== CONNECTION LEGEND ===== */
.workflow-connection-legend {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  z-index: 1000;
  min-width: 200px;
}

.workflow-connection-legend h4 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-align: center;
}

.workflow-connection-legend p {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
}

/* ===== REACT FLOW CANVAS ===== */
.workflow-canvas {
  flex: 1;
  position: relative;
  background: var(--bg-darkest);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .workflow-node-palette {
    width: 180px;
  }
  
  .workflow-header {
    padding: 0 var(--space-md);
  }
  
  .workflow-header-right {
    gap: var(--space-xs);
  }
  
  .workflow-action-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
  }
  
  .workflow-connection-legend {
    top: var(--space-sm);
    right: var(--space-sm);
    min-width: 160px;
  }
}

@media (max-width: 480px) {
  .workflow-node-palette {
    width: 160px;
  }
  
  .workflow-draggable-node {
    padding: var(--space-xs) var(--space-sm);
    font-size: 10px;
  }
  
  .workflow-action-btn span {
    display: none;
  }
}

/* ===== LOADING STATES ===== */
.workflow-action-btn.loading {
  position: relative;
}

.workflow-action-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== ACCESSIBILITY ===== */
.workflow-action-btn:focus-visible,
.workflow-draggable-node:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== DARK/LIGHT MODE SPECIFIC ===== */

/* Dark Mode Styles */
.dark-mode .workflow-connection-legend {
  background: rgba(31, 41, 55, 0.95);
}

/* Light Mode Styles */
.light-mode .unified-workflow-editor {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
}

.light-mode .unified-workflow-editor::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.02) 0%, transparent 50%);
}

.light-mode .workflow-connection-legend {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Light Mode Header */
.light-mode .workflow-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
}

.light-mode .workflow-header::before {
  background: radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
}

/* Light Mode Action Buttons */
.light-mode .workflow-action-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.light-mode .workflow-action-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.light-mode .workflow-action-btn:active {
  background: rgba(248, 250, 252, 0.95);
  transform: translateY(1px);
}

/* Light Mode Node Palette */
.light-mode .workflow-node-palette {
  background: rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.light-mode .workflow-node-palette h3 {
  color: var(--text-primary);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Light Mode Draggable Nodes */
.light-mode .workflow-draggable-node {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

.light-mode .workflow-draggable-node::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}

.light-mode .workflow-draggable-node:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Light Mode Main Content & Canvas Area */
.light-mode .workflow-main-content {
  background: rgba(248, 250, 252, 0.8);
}

/* Override gap background for light mode */
.light-mode .workflow-main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(248, 250, 252, 0.8);
  z-index: -1;
}

.light-mode .workflow-canvas {
  background: rgba(248, 250, 252, 0.8);
}

/* Override canvas gap background for light mode */
.light-mode .workflow-canvas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(248, 250, 252, 0.8);
  z-index: -1;
}

.light-mode .workflow-canvas-container {
  background: rgba(255, 255, 255, 0.5);
}

.light-mode .react-flow {
  background: rgba(248, 250, 252, 0.8) !important;
}

/* Light Mode React Flow Background */
.light-mode .react-flow__background {
  background: rgba(248, 250, 252, 0.9) !important;
}

.light-mode .react-flow__background pattern circle {
  fill: rgba(0, 0, 0, 0.1) !important;
}

/* Light Mode React Flow Controls */
.light-mode .react-flow__controls {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.light-mode .react-flow__controls button {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--text-primary) !important;
}

.light-mode .react-flow__controls button:hover {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Light Mode MiniMap */
.light-mode .react-flow__minimap {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.light-mode .react-flow__minimap-mask {
  fill: rgba(248, 250, 252, 0.6) !important;
}

/* Light Mode Edges/Connections */
.light-mode .react-flow__edge-path {
  stroke: rgba(0, 0, 0, 0.4) !important;
  stroke-width: 2px !important;
}

.light-mode .react-flow__edge.selected .react-flow__edge-path {
  stroke: var(--primary) !important;
  stroke-width: 3px !important;
}

/* Light Mode Node Selection */
.light-mode .react-flow__node.selected {
  box-shadow: 0 0 0 2px var(--primary) !important;
}

/* Light Mode Attribution */
.light-mode .react-flow__attribution {
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* ===== ENHANCED VISUAL EFFECTS ===== */
.workflow-header {
  backdrop-filter: blur(8px);
}

.workflow-node-palette {
  backdrop-filter: blur(4px);
}

.workflow-draggable-node {
  backdrop-filter: blur(4px);
}

/* ===== ORGANIZE NODES SECTION ===== */
.workflow-organize-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

.workflow-organize-section h4 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== WIRE LEGEND STYLING ===== */
.workflow-wire-legend {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.workflow-wire-legend-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.workflow-wire-types {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.workflow-wire-type {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 10px;
}

.workflow-wire-indicator {
  width: 16px;
  height: 2px;
  border-radius: 1px;
}

.workflow-wire-label {
  color: var(--text-primary);
  font-size: 11px;
}

.workflow-wire-description {
  margin-top: var(--space-xs);
  font-size: 8px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
}

/* ===== ENHANCED REACT FLOW INTEGRATION ===== */
.workflow-canvas .react-flow__controls {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.workflow-canvas .react-flow__minimap {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.workflow-draggable-node {
  will-change: transform, box-shadow;
}

.workflow-action-btn {
  will-change: transform, box-shadow;
}

/* ===== ENHANCED HOVER STATES ===== */
.workflow-node-palette::-webkit-scrollbar {
  width: 4px;
}

.workflow-node-palette::-webkit-scrollbar-track {
  background: var(--bg-medium);
}

.workflow-node-palette::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 2px;
}

.workflow-node-palette::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* ===== ENHANCED ANIMATIONS ===== */
@keyframes nodeGlow {
  0%, 100% { box-shadow: 0 4px 12px rgba(var(--primary-rgb, 59, 130, 246), 0.2); }
  50% { box-shadow: 0 6px 20px rgba(var(--primary-rgb, 59, 130, 246), 0.4); }
}

.workflow-draggable-node.prompt:hover {
  animation: nodeGlow 2s ease-in-out infinite;
}

/* ===== ENHANCED FOCUS STATES ===== */
.workflow-draggable-node:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 59, 130, 246), 0.2);
}

/* ===== ENHANCED SELECTION STATES ===== */
.workflow-draggable-node.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}

/* ===== ENHANCED LOADING STATES ===== */
.workflow-action-btn.loading .workflow-action-btn-text {
  opacity: 0;
}

.workflow-action-btn.loading::after {
  opacity: 1;
}

/* ===== PERSISTENT EXECUTION ANIMATIONS ===== */
/* Enhanced animation classes - persistent across tab switches */
.animate-spin {
  animation: spin 1s linear infinite;
  animation-play-state: running !important;
}

.animate-spin-persistent {
  animation: spin-persistent 1s linear infinite;
  animation-play-state: running !important;
  animation-fill-mode: forwards;
}

@keyframes spin-persistent {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Force animations to continue even when tab is not visible */
.workflow-header-right .animate-spin,
.workflow-action-btn .animate-spin,
.workflow-action-btn .animate-spin-persistent {
  animation-play-state: running !important;
  will-change: transform;
}

/* Global execution indicator styles */
.workflow-execution-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.workflow-execution-indicator:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}
/**
 * React Flow Node Fixes
 * 
 * Fixes for React Flow default styling issues:
 * - White rectangle backgrounds
 * - Blue selection outlines
 * - Default node wrapper styling
 */

/* Remove default React Flow node backgrounds */
.react-flow__node {
  background: transparent !important;
}

/* Remove React Flow selection outline */
.react-flow__node.selected {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove default node styling */
.react-flow__node-default {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove selection styling from default nodes */
.react-flow__node-default.selected {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove any pseudo-element backgrounds */
.react-flow__node::before,
.react-flow__node::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* Ensure custom node content is properly positioned */
.react-flow__node > div {
  position: relative;
  z-index: 1;
}

/* Remove focus outlines that might appear */
.react-flow__node:focus,
.react-flow__node:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Handle specific node types */
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.react-flow__node-input.selected,
.react-flow__node-output.selected,
.react-flow__node-group.selected {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure node titles and content are visible */
.node-title,
.node-header .node-title {
  color: inherit !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
  position: relative !important;
}

.node-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  z-index: 10 !important;
  position: relative !important;
}

.node-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

/* Fix for any potential text color issues */
.file-input-node .node-title,
.asset-input-node .node-title,
.block-input-node .node-title {
  color: #ffffff !important;
}

[data-theme="light"] .file-input-node .node-title,
[data-theme="light"] .asset-input-node .node-title,
[data-theme="light"] .block-input-node .node-title {
  color: #111827 !important;
}

/* Spinner animation for loading states */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ============================================================================
   TAXONOMY NODE PALETTE - REAL TAXONOMY INTEGRATION
   ============================================================================ */

.taxonomy-node-palette {
  width: 300px;
  height: 100%;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================================
   THEME VARIABLES
   ============================================================================ */

/* Light theme variables */
[data-theme="light"] .taxonomy-node-palette {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #ffffff;
  --bg-quaternary: #f3f4f6;
  --bg-hover: #f3f4f6;
  --border-color: #e5e7eb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --accent-color: #3b82f6;
  --accent-hover: #2563eb;
}

/* Dark theme variables */
[data-theme="dark"] .taxonomy-node-palette {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --bg-quaternary: rgba(255, 255, 255, 0.1);
  --bg-hover: #4b5563;
  --border-color: #4b5563;
  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --accent-color: #3b82f6;
  --accent-hover: #1d4ed8;
}

/* ============================================================================
   PALETTE HEADER
   ============================================================================ */

.palette-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.palette-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}

.palette-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  cursor: pointer;
}

.palette-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--border-color);
}

.palette-tabs .tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 32px;
}

.palette-tabs .tab:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.palette-tabs .tab.active {
  background: var(--accent-color);
  color: #ffffff;
}

/* ============================================================================
   PALETTE CONTENT
   ============================================================================ */

.palette-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  background: var(--bg-secondary);
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================================================
   TAXONOMY TREE
   ============================================================================ */

.taxonomy-item {
  margin-bottom: 8px;
}

.taxonomy-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  margin-bottom: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.taxonomy-header:hover {
  background: var(--bg-hover);
  border-color: var(--accent-color);
}

.taxonomy-header.expanded {
  background: var(--bg-hover);
  border-color: var(--accent-color);
}

.taxonomy-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.taxonomy-icon {
  font-size: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.taxonomy-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.taxonomy-count {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-quaternary);
  padding: 2px 6px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}

.taxonomy-content {
  margin-top: 8px;
  margin-left: 16px;
}

.taxonomy-nodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

/* ============================================================================
   NODE GRID & CARDS
   ============================================================================ */

.node-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.node-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  cursor: grab;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
}

.node-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

/* Light mode hover shadow */
[data-theme="light"] .node-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode hover shadow */
[data-theme="dark"] .node-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.node-card:active {
  cursor: grabbing;
  transform: translateY(0);
}

.node-card.partial {
  border-left: 3px solid #f59e0b;
}

.node-card.planned {
  border-left: 3px solid var(--text-tertiary);
  opacity: 1;
}

/* Node Palette Specific Headers */
.taxonomy-node-palette .node-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}

.taxonomy-node-palette .node-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* Dark mode icon shadow */
[data-theme="dark"] .taxonomy-node-palette .node-icon {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Light mode icon shadow */
[data-theme="light"] .taxonomy-node-palette .node-icon {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.taxonomy-node-palette .node-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  text-align: left;
  flex: 1;
  margin-right: 8px;
  word-wrap: break-word;
  align-self: flex-start;
}



/* Node Palette Specific Content */
.taxonomy-node-palette .node-content {
  flex: 1;
}

.taxonomy-node-palette .node-description {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.node-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.node-difficulty {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-quaternary);
  color: var(--text-tertiary);
  text-transform: capitalize;
}

.node-io {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================================
   UNIVERSAL NODES SECTION
   ============================================================================ */

.universal-nodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.universal-section {
  margin-bottom: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}


  min-width: 18px;
  text-align: center;
  font-weight: 500;
}

/* ============================================================================
   SEARCH RESULTS
   ============================================================================ */

.search-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.search-results .node-card {
  border-left: 3px solid var(--accent-color, #3b82f6);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
  .taxonomy-node-palette {
    width: 280px;
  }
  
  .palette-header {
    padding: 12px;
  }
  
  .palette-content {
    padding: 12px;
  }
  
  .node-card {
    padding: 10px;
  }
  
  .node-name {
    font-size: 13px;
  }
  
  .node-description {
    font-size: 10px;
  }
}

/* ============================================================================
   THEME CONSISTENCY IMPROVEMENTS
   ============================================================================ */

/* Ensure consistent theming across all elements */
.taxonomy-node-palette * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Light mode specific adjustments */
[data-theme="light"] .taxonomy-node-palette .badge.popular {
  background: #f59e0b;
  color: #ffffff;
}

[data-theme="light"] .taxonomy-node-palette .badge.partial {
  background: #3b82f6;
  color: #ffffff;
}

[data-theme="light"] .taxonomy-node-palette .badge.planned {
  background: #6b7280;
  color: #ffffff;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .taxonomy-node-palette .badge.popular {
  background: #f59e0b;
  color: #ffffff;
}

[data-theme="dark"] .taxonomy-node-palette .badge.partial {
  background: #3b82f6;
  color: #ffffff;
}

[data-theme="dark"] .taxonomy-node-palette .badge.planned {
  background: #6b7280;
  color: #ffffff;
}

/* Search results styling */
.search-results-title {
  color: var(--text-secondary);
}

/* ============================================================================
   FORCE THEME CONSISTENCY - HIGH SPECIFICITY OVERRIDES
   ============================================================================ */

/* Ensure node cards always use theme variables */
.taxonomy-node-palette .node-card {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.taxonomy-node-palette .node-card:hover {
  background: var(--bg-hover) !important;
  border-color: var(--accent-color) !important;
}

.taxonomy-node-palette .node-card .node-name {
  color: var(--text-primary) !important;
}

.taxonomy-node-palette .node-card .node-description {
  color: var(--text-secondary) !important;
}

.taxonomy-node-palette .node-card .node-difficulty {
  background: var(--bg-quaternary) !important;
  color: var(--text-tertiary) !important;
}

.taxonomy-node-palette .node-card .node-io {
  color: var(--text-tertiary) !important;
}

.taxonomy-node-palette .node-card .node-icon {
  background: var(--bg-quaternary) !important;
}
.appearance {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.appearance-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.appearance-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.appearance-description {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.appearance-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.appearance-section {
  margin-bottom: 32px;
}

.appearance-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
}

/* Theme options */
.theme-options {
  display: flex;
  gap: 16px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.theme-option.active {
  border-color: var(--primary);
}

.theme-preview {
  width: 120px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
  border: 1px solid var(--border-color);
}

.theme-preview-light {
  background-color: #f5f5f5;
}

.theme-preview-dark {
  background-color: #1e1e1e;
}

.theme-preview-header {
  height: 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.theme-preview-dark .theme-preview-header {
  background-color: #2d2d2d;
  border-color: #3d3d3d;
}

.theme-preview-sidebar {
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 0;
  width: 30px;
  background-color: #f0f0f0;
  border-right: 1px solid #e0e0e0;
}

.theme-preview-dark .theme-preview-sidebar {
  background-color: #252525;
  border-color: #3d3d3d;
}

.theme-preview-content {
  position: absolute;
  left: 30px;
  top: 16px;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
}

.theme-preview-dark .theme-preview-content {
  background-color: #1e1e1e;
}

.theme-option span {
  font-size: 14px;
  color: var(--text-primary);
}

/* Color options */
.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.color-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.color-option.active {
  border-color: var(--primary);
}

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 8px;
}

.color-blue {
  background-color: #4285F4;
}

.color-green {
  background-color: #0F9D58;
}

.color-red {
  background-color: #DB4437;
}

.color-yellow {
  background-color: #F4B400;
}

.color-purple {
  background-color: #9C27B0;
}

.color-cyan {
  background-color: #00BCD4;
}

.color-option span {
  font-size: 14px;
  color: var(--text-primary);
}

/* Select inputs */
.select-container {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.appearance-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
  appearance: none;
  cursor: pointer;
}

.appearance-select:focus {
  outline: none;
  border-color: var(--primary);
}

.select-container::after {
  content: '▼';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
  font-size: 12px;
}

/* Custom themes */
.add-theme-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.add-theme-form {
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.form-group input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.color-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-input-container input[type="color"] {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: transparent;
}

.color-text-input {
  flex: 1;
  max-width: 120px;
}

.add-theme-submit {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
}

.custom-themes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-theme-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
}

.custom-theme-colors {
  display: flex;
  gap: 8px;
  margin-right: 16px;
}

.custom-theme-color {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.custom-theme-info {
  flex: 1;
}

.custom-theme-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.custom-theme-actions {
  display: flex;
  gap: 8px;
}

.apply-theme-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}

.delete-theme-btn {
  background-color: transparent;
  color: var(--bg-danger);
  border: 1px solid var(--bg-danger);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}

.delete-theme-btn:hover {
  background-color: rgba(255, 85, 85, 0.1);
}

/* Dark theme adjustments */
.appearance.dark .add-theme-form {
  background-color: var(--bg-surface-3);
}

.appearance.dark .form-group input[type="text"],
.appearance.dark .appearance-select {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

.appearance.dark .custom-theme-item {
  background-color: var(--bg-surface-3);
}

/* No custom themes message */
.no-custom-themes {
  padding: 16px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  text-align: center;
}

.no-custom-themes p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.appearance.dark .no-custom-themes {
  background-color: var(--bg-surface-3);
}
.personal-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.personal-info-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.personal-info-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.personal-info-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Profile View Styles */
.profile-view {
  max-width: 800px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-right: 24px;
  border: 1px solid var(--border-color);
}

.profile-info {
  flex: 1;
}

.profile-name {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.profile-email {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: var(--text-secondary);
}

.profile-join-date {
  margin: 0;
  font-size: 14px;
  color: var(--text-tertiary);
}

.profile-section {
  margin-bottom: 32px;
}

.profile-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color-light);
}

.profile-bio {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
}

.profile-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-detail-item {
  display: flex;
  align-items: center;
}

.detail-label {
  width: 100px;
  font-size: 14px;
  color: var(--text-secondary);
}

.detail-value {
  font-size: 16px;
  color: var(--text-primary);
}

.detail-value.link {
  color: var(--primary);
  text-decoration: none;
}

.detail-value.link:hover {
  text-decoration: underline;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  color: white;
  font-weight: 500;
}

.social-link.twitter {
  background-color: #1DA1F2;
}

.social-link.github {
  background-color: #333;
}

.social-link.linkedin {
  background-color: #0077B5;
}

.social-link.other {
  background-color: #6c757d;
}

.social-link:hover {
  opacity: 0.9;
}

/* Edit Profile Form Styles */
.edit-profile-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.edit-profile-form {
  max-width: 800px;
  margin: 0 auto;
}

.avatar-upload-container {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-right: 24px;
  border: 1px solid var(--border-color);
}

.avatar-upload-label {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
}

.avatar-upload-input {
  display: none;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  flex: 1;
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.cancel-btn {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
}

.save-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.edit-profile-form h3 {
  margin: 24px 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Dark theme adjustments */
.personal-info.dark .form-group input,
.personal-info.dark .form-group textarea {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-avatar {
    margin-right: 0;
    margin-bottom: 16px;
  }
}
.security-privacy {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.security-privacy-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.security-privacy-header h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
}

.tab {
  padding: 8px 16px;
  background-color: var(--bg-surface-2);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.tab:hover {
  background-color: var(--bg-surface-3);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--bg-surface-1);
}

.security-privacy-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Security Tab Styles */
.security-section,
.privacy-section,
.connected-apps-section {
  margin-bottom: 32px;
}

.security-section h3,
.privacy-section h3,
.connected-apps-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color-light);
}

.section-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.security-item,
.privacy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  margin-bottom: 12px;
}

.security-item-info,
.privacy-item-info {
  flex: 1;
}

.security-item-info h4,
.privacy-item-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
}

.security-item-description,
.privacy-item-description {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.change-password-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

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

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-surface-3);
  transition: .4s;
  border-radius: 24px;
}

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

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

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

/* Change Password Form Styles */
.change-password-form {
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.save-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.password-error {
  color: var(--bg-danger);
  font-size: 14px;
  margin: 8px 0;
}

/* Login History Styles */
.login-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
}

.login-history-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-device {
  font-size: 14px;
  font-weight: 500;
}

.login-ip,
.login-location {
  font-size: 12px;
  color: var(--text-secondary);
}

.login-date {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Privacy Tab Styles */
.privacy-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 150px;
}

/* Connected Apps Tab Styles */
.connected-apps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connected-app-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
}

.connected-app-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
}

.connected-app-permissions,
.connected-app-last-used {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.remove-app-btn {
  background-color: transparent;
  color: var(--bg-danger);
  border: 1px solid var(--bg-danger);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.remove-app-btn:hover {
  background-color: rgba(255, 85, 85, 0.1);
}

.no-connected-apps,
.no-login-history {
  display: flex;
  justify-content: center;
  padding: 32px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  color: var(--text-tertiary);
  font-style: italic;
  border: 1px dashed var(--border-color-light);
}

/* Dark theme adjustments */
.security-privacy.dark .form-group input,
.security-privacy.dark .privacy-select {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .security-item,
  .privacy-item,
  .connected-app-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .security-item-info,
  .privacy-item-info {
    margin-bottom: 8px;
  }

  .tabs {
    overflow-x: auto;
    width: 100%;
  }
}
.notifications {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.notifications-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.notifications-header h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
}

.tab {
  padding: 8px 16px;
  background-color: var(--bg-surface-2);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  position: relative;
}

.tab:hover {
  background-color: var(--bg-surface-3);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--bg-surface-1);
}

.unread-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: var(--bg-danger);
  color: white;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

.notifications-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Notifications List Styles */
.notifications-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.notifications-filters {
  display: flex;
  align-items: center;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.notifications-actions {
  display: flex;
  gap: 8px;
}

.mark-all-read-btn,
.clear-all-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.mark-all-read-btn {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.clear-all-btn {
  background-color: transparent;
  color: var(--bg-danger);
  border: 1px solid var(--bg-danger);
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  display: flex;
  padding: 16px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.notification-item.unread {
  background-color: var(--bg-surface-3);
  border-left: 3px solid var(--primary);
}

.notification-item:hover {
  background-color: var(--bg-surface-3);
}

.notification-icon {
  margin-right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-surface-4);
  flex-shrink: 0;
}

.notification-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-mention,
.icon-comment,
.icon-update,
.icon-system,
.icon-security {
  font-size: 20px;
}

.notification-content {
  flex: 1;
}

.notification-text {
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.notification-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.notification-type {
  text-transform: capitalize;
}

.notification-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.notification-item:hover .notification-actions {
  opacity: 1;
}

.mark-read-btn,
.delete-notification-btn {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.mark-read-btn {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.delete-notification-btn {
  background-color: transparent;
  color: var(--bg-danger);
  border: 1px solid var(--bg-danger);
}

.no-notifications {
  display: flex;
  justify-content: center;
  padding: 32px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  color: var(--text-tertiary);
}

/* Notification Settings Styles */
.notification-settings {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-section {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
}

.settings-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color-light);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color-light);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
}

.setting-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
}

.setting-description {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

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

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-surface-3);
  transition: .4s;
  border-radius: 24px;
}

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

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

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

/* Dark theme adjustments */
.notifications.dark .filter-select {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

.notifications.dark .setting-item {
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .notifications-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .notifications-filters,
  .notifications-actions {
    width: 100%;
  }
  
  .filter-select {
    width: 100%;
  }
  
  .notifications-actions {
    justify-content: space-between;
  }
  
  .notification-item {
    flex-direction: column;
  }
  
  .notification-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .notification-actions {
    margin-top: 12px;
    flex-direction: row;
    opacity: 1;
  }
  
  .tabs {
    overflow-x: auto;
    width: 100%;
  }
}
.billing-subscription {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.billing-subscription-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.billing-subscription-header h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
}

.tab {
  padding: 8px 16px;
  background-color: var(--bg-surface-2);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.tab:hover {
  background-color: var(--bg-surface-3);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--bg-surface-1);
}

.billing-subscription-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Subscription Tab Styles */
.current-plan {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.plan-info h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 500;
}

.plan-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-name {
  font-size: 18px;
  font-weight: 600;
}

.plan-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.plan-status.active {
  background-color: rgba(15, 157, 88, 0.1);
  color: #0F9D58;
}

.plan-status.inactive,
.plan-status.canceled {
  background-color: rgba(219, 68, 55, 0.1);
  color: #DB4437;
}

.plan-status.past-due {
  background-color: rgba(244, 180, 0, 0.1);
  color: #F4B400;
}

.change-plan-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.plan-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-color-light);
}

.plan-price {
  font-size: 24px;
  font-weight: 600;
}

.price {
  color: var(--text-primary);
}

.interval {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 400;
}

.next-billing {
  font-size: 14px;
  color: var(--text-secondary);
}

.plan-features h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.features-list li.included {
  color: var(--text-primary);
}

.features-list li.not-included {
  color: var(--text-tertiary);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
}

.included .feature-icon {
  background-color: rgba(15, 157, 88, 0.1);
  color: #0F9D58;
}

.not-included .feature-icon {
  background-color: rgba(219, 68, 55, 0.1);
  color: #DB4437;
}

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

.modal-content {
  background-color: var(--bg-surface-1);
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-modal-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-tertiary);
  cursor: pointer;
}

.billing-interval-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  background-color: var(--bg-surface-2);
  border-radius: 4px;
  padding: 4px;
}

.interval-btn {
  padding: 8px 16px;
  background: none;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-secondary);
}

.interval-btn.active {
  background-color: var(--primary);
  color: white;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.plan-card {
  background-color: var(--bg-surface-2);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.plan-card:hover {
  background-color: var(--bg-surface-3);
}

.plan-card.selected {
  border-color: var(--primary);
}

.plan-card-header {
  margin-bottom: 16px;
  text-align: center;
}

.plan-card-header h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

.plan-card-price {
  font-size: 24px;
  font-weight: 600;
}

.plan-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-card-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 8px;
}

.selected-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: var(--primary);
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.confirm-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Payment Tab Styles */
.payment-method {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
}

.payment-method h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
}

.current-payment-method {
  margin-bottom: 24px;
}

.no-payment-method {
  padding: 24px;
  background-color: var(--bg-surface-3);
  border-radius: 6px;
  text-align: center;
  color: var(--text-tertiary);
}

.no-payment-method p {
  margin: 0;
  font-style: italic;
}

.credit-card,
.paypal,
.bank-account {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--bg-surface-3);
  border-radius: 6px;
}

.card-icon,
.paypal-icon,
.bank-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-details,
.paypal-details,
.bank-details {
  flex: 1;
}

.card-type,
.paypal-email,
.bank-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.card-number,
.card-expiry,
.bank-number {
  font-size: 14px;
  color: var(--text-secondary);
}

.payment-actions {
  display: flex;
  justify-content: flex-end;
}

.update-payment-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* History Tab Styles */
.billing-history {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
}

.billing-history h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
}

.billing-table {
  width: 100%;
}

.billing-table-header {
  display: flex;
  background-color: var(--bg-surface-3);
  padding: 12px 16px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 4px 4px 0 0;
}

.billing-table-body {
  display: flex;
  flex-direction: column;
}

.billing-table-row {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color-light);
}

.billing-table-row:last-child {
  border-bottom: none;
  border-radius: 0 0 4px 4px;
}

.billing-table-row.empty {
  justify-content: center;
  padding: 24px;
  color: var(--text-tertiary);
}

.billing-table-cell.empty-message {
  text-align: center;
  width: 100%;
  justify-content: center;
  font-style: italic;
}

.billing-table-cell {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.billing-table-cell.date {
  flex: 1.5;
}

.billing-table-cell.invoice {
  flex: 1;
}

.billing-table-cell.amount {
  flex: 1;
}

.billing-table-cell.status {
  flex: 1;
}

.billing-table-cell.actions {
  flex: 1;
  justify-content: flex-end;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-success {
  background-color: rgba(15, 157, 88, 0.1);
  color: #0F9D58;
}

.status-warning {
  background-color: rgba(244, 180, 0, 0.1);
  color: #F4B400;
}

.status-danger {
  background-color: rgba(219, 68, 55, 0.1);
  color: #DB4437;
}

.download-invoice-btn {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}

/* Dark theme adjustments */
.billing-subscription.dark .plan-summary {
  border-color: var(--border-color-dark);
}

.billing-subscription.dark .billing-table-row {
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .plan-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .features-list {
    grid-template-columns: 1fr;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .billing-table-header,
  .billing-table-row {
    font-size: 12px;
  }

  .billing-table-cell.actions {
    flex-direction: column;
    gap: 4px;
  }
}
.usage-statistics {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.usage-statistics-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.usage-statistics-header h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.tab {
  padding: 8px 16px;
  background-color: var(--bg-surface-2);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap;
}

.tab:hover {
  background-color: var(--bg-surface-3);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--bg-surface-1);
}

.usage-statistics-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.last-updated {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  text-align: right;
}

/* Overview Tab Styles */
.usage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.usage-card {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 16px;
}

.usage-card h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 500;
}

.usage-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
}

.used {
  color: var(--primary);
}

.separator {
  margin: 0 4px;
  color: var(--text-secondary);
}

.total {
  color: var(--text-secondary);
}

.unit {
  font-size: 16px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.usage-progress {
  margin-bottom: 8px;
}

.progress-bar {
  height: 8px;
  background-color: var(--bg-surface-3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-fill {
  height: 100%;
  background-color: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
}

.projects-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.active-projects,
.inactive-projects {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  color: var(--text-secondary);
}

.value {
  font-weight: 500;
}

/* Usage History Section Styles */
.usage-history-section {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 16px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.history-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.time-range-selector {
  display: flex;
  gap: 4px;
}

.time-range-btn {
  padding: 4px 8px;
  background-color: var(--bg-surface-3);
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.time-range-btn.active {
  background-color: var(--primary);
  color: white;
}

.chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.storage {
  background-color: var(--primary);
}

.legend-color.api {
  background-color: #F4B400;
}

.chart-container {
  display: flex;
  height: 200px;
}

.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 10px;
  color: var(--text-tertiary);
}

.chart-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  border-left: 1px solid var(--border-color-light);
  border-bottom: 1px solid var(--border-color-light);
  padding-top: 8px;
  padding-left: 8px;
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart-bar-container {
  display: flex;
  gap: 4px;
  height: 100%;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
}

.chart-bar {
  width: 20px;
  position: relative;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

.chart-bar.storage {
  background-color: var(--primary);
}

.chart-bar.api {
  background-color: #F4B400;
}

.bar-tooltip {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-surface-4);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.chart-bar:hover .bar-tooltip {
  opacity: 1;
}

.chart-x-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 8px;
  text-align: center;
}

.no-data-message {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--text-secondary);
  font-size: 14px;
  font-style: italic;
  text-align: center;
  padding: 20px;
  background-color: var(--bg-surface-1);
  border-radius: 4px;
  border: 1px dashed var(--border-color-light);
}

/* Storage Tab Styles */
.storage-details,
.api-details,
.projects-details {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
}

.storage-details h3,
.api-details h3,
.projects-details h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
}

.storage-summary,
.api-summary,
.projects-summary {
  display: flex;
  margin-bottom: 24px;
}

.storage-info,
.api-info,
.projects-info {
  flex: 1;
}

.storage-used,
.storage-available,
.storage-total,
.api-used,
.api-available,
.api-total,
.total-projects,
.active-projects,
.inactive-projects,
.projects-limit {
  margin-bottom: 12px;
  font-size: 14px;
}

.storage-progress-circle,
.api-progress-circle {
  width: 120px;
  height: 120px;
}

.circular-chart {
  width: 100%;
  height: 100%;
}

.circle-bg {
  fill: none;
  stroke: var(--bg-surface-3);
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

.circle.api {
  stroke: #F4B400;
}

.percentage {
  fill: var(--text-primary);
  font-size: 0.5em;
  text-anchor: middle;
  font-weight: 600;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.storage-tips,
.api-tips {
  margin-bottom: 24px;
}

.storage-tips h4,
.api-tips h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
}

.storage-tips ul,
.api-tips ul {
  padding-left: 20px;
  margin: 0;
}

.storage-tips li,
.api-tips li {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.storage-actions,
.api-actions,
.projects-actions {
  display: flex;
  gap: 12px;
}

.upgrade-storage-btn,
.clean-storage-btn,
.upgrade-api-btn,
.view-api-logs-btn,
.view-projects-btn,
.create-project-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.upgrade-storage-btn,
.upgrade-api-btn,
.create-project-btn {
  background-color: var(--primary);
  color: white;
  border: none;
}

.clean-storage-btn,
.view-api-logs-btn,
.view-projects-btn {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Projects Tab Styles */
.projects-chart {
  width: 120px;
  height: 120px;
}

.donut-chart {
  position: relative;
}

.donut-ring {
  fill: transparent;
  stroke: var(--bg-surface-3);
  stroke-width: 3;
}

.donut-segment {
  fill: transparent;
  stroke-width: 3;
  stroke-linecap: round;
}

.donut-segment.active {
  stroke: var(--primary);
}

.donut-segment.inactive {
  stroke: #F4B400;
}

.donut-chart-legend {
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.legend-color.active {
  background-color: var(--primary);
}

.legend-color.inactive {
  background-color: #F4B400;
}

/* Dark theme adjustments */
.usage-statistics.dark .chart-bars {
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .usage-cards {
    grid-template-columns: 1fr;
  }

  .storage-summary,
  .api-summary,
  .projects-summary {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .storage-info,
  .api-info,
  .projects-info {
    width: 100%;
  }

  .storage-actions,
  .api-actions,
  .projects-actions {
    flex-direction: column;
  }

  .chart-bars {
    gap: 8px;
  }

  .chart-bar {
    width: 12px;
  }
}
.keyboard-shortcuts {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.keyboard-shortcuts-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.keyboard-shortcuts-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.search-container {
  width: 300px;
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.keyboard-shortcuts-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.shortcuts-category {
  margin-bottom: 32px;
}

.shortcuts-category h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color-light);
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
}

.shortcut-info {
  display: flex;
  flex-direction: column;
}

.shortcut-action {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.shortcut-description {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shortcut-key-combo {
  display: flex;
  align-items: center;
}

.shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background-color: var(--bg-surface-3);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.key-plus {
  margin: 0 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

.edit-shortcut-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.shortcut-item:hover .edit-shortcut-btn {
  opacity: 1;
}

.shortcut-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.recording-keys {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  background-color: var(--bg-surface-3);
  border: 1px solid var(--primary);
  border-radius: 4px;
}

.recording-prompt {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.shortcut-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.record-btn {
  width: 100%;
  padding: 6px 12px;
  background-color: var(--bg-surface-3);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.record-btn:hover {
  background-color: var(--bg-surface-4);
}

.cancel-btn {
  padding: 4px 8px;
  background-color: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.save-btn {
  padding: 4px 8px;
  background-color: var(--primary);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.save-btn:disabled {
  background-color: var(--bg-surface-3);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* Dark theme adjustments */
.keyboard-shortcuts.dark .search-input {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

.keyboard-shortcuts.dark .shortcut-key {
  background-color: var(--bg-surface-4);
  border-color: var(--border-color-dark);
}

.keyboard-shortcuts.dark .record-btn {
  background-color: var(--bg-surface-4);
  border-color: var(--border-color-dark);
}

.keyboard-shortcuts.dark .recording-keys {
  background-color: var(--bg-surface-4);
}

@media (max-width: 768px) {
  .keyboard-shortcuts-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .search-container {
    width: 100%;
  }
  
  .shortcut-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .shortcut-keys {
    width: 100%;
    justify-content: space-between;
  }
}
.storage-manager {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.storage-manager-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.storage-manager-header h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
}

.tab {
  padding: 8px 16px;
  background-color: var(--bg-surface-2);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.tab:hover {
  background-color: var(--bg-surface-3);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--bg-surface-1);
}

.storage-manager-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Overview Tab Styles */
.storage-overview {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.storage-usage {
  margin-bottom: 24px;
}

.storage-usage-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.storage-usage-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.storage-usage-text {
  font-size: 14px;
}

.used-space {
  font-weight: 500;
  color: var(--primary);
}

.total-space {
  color: var(--text-secondary);
  margin-left: 4px;
}

.storage-progress-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.storage-progress-bar {
  height: 8px;
  background-color: var(--bg-surface-3);
  border-radius: 4px;
  overflow: hidden;
}

.storage-progress-fill {
  height: 100%;
  background-color: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.storage-progress-text {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

.storage-distribution {
  margin-bottom: 24px;
}

.storage-distribution h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
}

.storage-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.storage-chart-container {
  display: flex;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
}

.storage-chart-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.storage-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.storage-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.storage-chart-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.storage-chart-legend-name {
  font-size: 14px;
  color: var(--text-primary);
}

.storage-chart-legend-size {
  font-size: 12px;
  color: var(--text-secondary);
}

.storage-actions {
  display: flex;
  gap: 12px;
}

.clear-cache-btn,
.upgrade-storage-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.clear-cache-btn {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.upgrade-storage-btn {
  background-color: var(--primary);
  color: white;
  border: none;
}

.storage-tips {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
}

.storage-tips h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
}

.storage-tip-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color-light);
}

.storage-tip-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.storage-tip-item h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
}

.storage-tip-item p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Details Tab Styles */
.storage-details {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
}

.storage-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.storage-table-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.refresh-btn {
  padding: 6px 12px;
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.storage-table {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.storage-table-head {
  display: flex;
  background-color: var(--bg-surface-3);
  padding: 12px 16px;
  font-weight: 500;
  font-size: 14px;
}

.storage-table-body {
  display: flex;
  flex-direction: column;
}

.storage-table-row {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color-light);
}

.storage-table-row:last-child {
  border-bottom: none;
}

.storage-table-cell {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.storage-table-cell.name {
  flex: 2;
  cursor: pointer;
}

.storage-table-cell.size,
.storage-table-cell.items {
  flex: 1;
  cursor: pointer;
}

.storage-table-cell.actions {
  flex: 1;
  justify-content: flex-end;
  gap: 8px;
}

.storage-table-cell.sorted {
  color: var(--primary);
}

.sort-indicator {
  margin-left: 4px;
}

.storage-item-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.storage-item-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.view-btn,
.clean-btn {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.view-btn {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.clean-btn {
  background-color: transparent;
  color: var(--bg-danger);
  border: 1px solid var(--bg-danger);
}

/* Dark theme adjustments */
.storage-manager.dark .storage-table-row {
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .storage-chart-legend {
    flex-direction: column;
    gap: 8px;
  }
  
  .storage-actions {
    flex-direction: column;
  }
  
  .storage-table-head,
  .storage-table-row {
    font-size: 12px;
  }
  
  .storage-table-cell.actions {
    flex-direction: column;
    gap: 4px;
  }
}
.extensions-gallery {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.extensions-gallery-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.extensions-gallery-header h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
}

.tab {
  padding: 8px 16px;
  background-color: var(--bg-surface-2);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.tab:hover {
  background-color: var(--bg-surface-3);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--bg-surface-1);
}

.extensions-gallery-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Extensions Toolbar Styles */
.extensions-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.search-container {
  flex: 1;
  max-width: 400px;
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.sort-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-container label {
  font-size: 14px;
  color: var(--text-secondary);
}

.sort-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

/* Extensions Filters Styles */
.extensions-filters {
  margin-bottom: 24px;
}

.tags-filter h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 500;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-filter {
  padding: 6px 12px;
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.tag-filter:hover {
  background-color: var(--bg-surface-3);
}

.tag-filter.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Extensions List Styles */
.extensions-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.extensions-list h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color-light);
}

.extension-item {
  display: flex;
  padding: 16px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  transition: background-color 0.2s;
}

.extension-item:hover {
  background-color: var(--bg-surface-3);
}

.extension-icon {
  margin-right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-surface-4);
  flex-shrink: 0;
}

.extension-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: white;
  background-color: var(--primary);
}

.extension-info {
  flex: 1;
}

.extension-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.extension-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.extension-version {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 2px 6px;
  background-color: var(--bg-surface-3);
  border-radius: 4px;
}

.extension-description {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.extension-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.extension-author {
  font-weight: 500;
}

.star-rating {
  display: flex;
  align-items: center;
}

.star {
  color: #f8c41b;
  font-size: 14px;
}

.star.empty {
  color: var(--text-tertiary);
}

.star.half {
  position: relative;
  color: var(--text-tertiary);
}

.star.half::before {
  content: "★";
  position: absolute;
  color: #f8c41b;
  width: 50%;
  overflow: hidden;
}

.rating-value {
  margin-left: 4px;
  font-weight: 500;
}

.extension-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.extension-tag {
  padding: 4px 8px;
  background-color: var(--bg-surface-3);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.extension-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: 16px;
  justify-content: center;
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

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

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-surface-3);
  transition: .4s;
  border-radius: 24px;
}

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

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

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

.install-btn,
.uninstall-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

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

.install-btn:disabled {
  background-color: var(--bg-surface-3);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.uninstall-btn {
  background-color: transparent;
  color: var(--bg-danger);
  border: 1px solid var(--bg-danger);
}

.no-extensions {
  display: flex;
  justify-content: center;
  padding: 32px;
  background-color: var(--bg-surface-2);
  border-radius: 6px;
  color: var(--text-tertiary);
}

/* Dark theme adjustments */
.extensions-gallery.dark .search-input,
.extensions-gallery.dark .sort-select {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .extensions-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .search-container,
  .sort-container {
    width: 100%;
    max-width: none;
  }
  
  .sort-select {
    flex: 1;
  }
  
  .extension-item {
    flex-direction: column;
  }
  
  .extension-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .extension-actions {
    margin-left: 0;
    margin-top: 16px;
    flex-direction: row;
    justify-content: flex-end;
  }
  
  .extension-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
.performance {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.performance-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.performance-header h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.tab {
  padding: 8px 16px;
  background-color: var(--bg-surface-2);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap;
}

.tab:hover {
  background-color: var(--bg-surface-3);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--bg-surface-1);
}

.performance-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Performance Section Styles */
.performance-section {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.performance-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color-light);
}

.section-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.performance-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color-light);
}

.performance-item:last-child {
  border-bottom: none;
}

.performance-info {
  flex: 1;
}

.performance-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
}

.performance-description {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

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

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-surface-3);
  transition: .4s;
  border-radius: 24px;
}

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

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

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

/* Range Slider Styles */
.range-control {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 200px;
}

.range-slider {
  flex: 1;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-surface-3);
  outline: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

.range-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
}

.range-value {
  font-size: 14px;
  color: var(--text-secondary);
  min-width: 60px;
  text-align: right;
}

/* Cache Actions Styles */
.cache-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.clear-cache-btn {
  background-color: transparent;
  color: var(--bg-danger);
  border: 1px solid var(--bg-danger);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.clear-cache-btn:hover {
  background-color: rgba(255, 85, 85, 0.1);
}

/* Memory Usage Styles */
.memory-usage {
  margin-top: 16px;
}

.memory-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.memory-current,
.memory-limit {
  font-size: 14px;
}

.label {
  color: var(--text-secondary);
  margin-right: 8px;
}

.value {
  font-weight: 500;
}

.memory-progress {
  margin-bottom: 8px;
}

.progress-bar {
  height: 8px;
  background-color: var(--bg-surface-3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-fill {
  height: 100%;
  background-color: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
}

/* Startup Items Styles */
.startup-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.startup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: var(--bg-surface-3);
  border-radius: 6px;
}

.startup-item-info {
  flex: 1;
}

.startup-item-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
}

.startup-item-description {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Metrics Styles */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: var(--bg-surface-3);
  border-radius: 6px;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-surface-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 16px;
}

.metric-info {
  flex: 1;
}

.metric-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
}

.metric-value {
  font-size: 14px;
  color: var(--text-secondary);
}

.metrics-actions {
  display: flex;
  justify-content: flex-end;
}

.refresh-metrics-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Dark theme adjustments */
.performance.dark .performance-item {
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .performance-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .range-control {
    width: 100%;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}
.advanced-settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.advanced-settings-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.advanced-settings-header h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.tab {
  padding: 8px 16px;
  background-color: var(--bg-surface-2);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap;
}

.tab:hover {
  background-color: var(--bg-surface-3);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: var(--bg-surface-1);
}

.advanced-settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Advanced Section Styles */
.advanced-section {
  background-color: var(--bg-surface-2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.advanced-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color-light);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  padding: 0;
  border: none;
}

.advanced-warning {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: rgba(244, 180, 0, 0.1);
  border-left: 4px solid #F4B400;
  border-radius: 4px;
  margin-bottom: 16px;
}

.warning-icon {
  margin-right: 12px;
  font-size: 20px;
}

.warning-text {
  font-size: 14px;
  color: var(--text-secondary);
}

.advanced-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color-light);
}

.advanced-item:last-child {
  border-bottom: none;
}

.advanced-info {
  flex: 1;
}

.advanced-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
}

.advanced-description {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

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

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-surface-3);
  transition: .4s;
  border-radius: 24px;
}

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

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

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

/* Select Input Styles */
.select-container {
  width: 200px;
}

.advanced-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 32px;
}

.advanced-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Add Button Styles */
.add-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Add Form Styles */
.add-form {
  background-color: var(--bg-surface-3);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  flex: 1;
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.add-confirm-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.add-confirm-btn:disabled {
  background-color: var(--bg-surface-3);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* Environment Variables Styles */
.env-vars-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.env-var-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: var(--bg-surface-3);
  border-radius: 6px;
}

.env-var-info {
  flex: 1;
}

.env-var-name-value {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.env-var-name {
  flex: 1;
  font-weight: 500;
}

.env-var-value {
  flex: 2;
}

.env-var-description-input {
  width: 100%;
  font-size: 12px;
  color: var(--text-secondary);
}

.delete-btn {
  background-color: transparent;
  color: var(--bg-danger);
  border: 1px solid var(--bg-danger);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 16px;
}

.delete-btn:hover {
  background-color: rgba(255, 85, 85, 0.1);
}

.no-items {
  display: flex;
  justify-content: center;
  padding: 32px;
  background-color: var(--bg-surface-3);
  border-radius: 6px;
  color: var(--text-tertiary);
}

/* API Endpoints Styles */
.api-endpoints-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.api-endpoint-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: var(--bg-surface-3);
  border-radius: 6px;
}

.api-endpoint-info {
  flex: 1;
}

.api-endpoint-header {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.api-endpoint-name {
  flex: 1;
  font-weight: 500;
}

.api-method-select {
  width: 100px;
}

.api-url-input {
  width: 100%;
}

.api-endpoint-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Scripts Styles */
.script-editor {
  margin-bottom: 24px;
}

.script-editor h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 500;
}

.script-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: monospace;
  font-size: 14px;
  resize: vertical;
}

.script-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* Advanced Actions Styles */
.advanced-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.reset-defaults-btn {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.reset-defaults-btn:hover {
  background-color: var(--bg-surface-2);
}

/* Dark theme adjustments */
.advanced-settings.dark .advanced-select,
.advanced-settings.dark .form-group input,
.advanced-settings.dark .form-group select,
.advanced-settings.dark .form-group textarea,
.advanced-settings.dark .script-textarea {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color-dark);
}

.advanced-settings.dark .advanced-item {
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .advanced-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .env-var-name-value {
    flex-direction: column;
    gap: 8px;
  }
  
  .api-endpoint-header {
    flex-direction: column;
    gap: 8px;
  }
  
  .api-endpoint-actions {
    margin-top: 16px;
    width: 100%;
    justify-content: space-between;
  }
}
/* ===== ENHANCED CREATOR MARKETPLACE STYLES ===== */

.creator-marketplace-hub {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background:
    radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  color: var(--text-primary, #f8f8f2);
  position: relative;
  overflow-y: auto;
  /* Entrance animation */
  animation: marketplaceSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes marketplaceSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== COMPACT HERO HEADER ===== */
.marketplace-hero-header {
  position: relative;
  padding: 20px 40px 30px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  /* Hero entrance animation */
  animation: heroSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

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

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    linear-gradient(225deg, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  backdrop-filter: blur(40px);
}

.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hero-particles .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(139, 92, 246, 0.6);
  border-radius: 50%;
  animation: particleFloat 8s ease-in-out infinite;
}

.hero-particles .particle:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  background: rgba(139, 92, 246, 0.8);
}

.hero-particles .particle:nth-child(2) {
  top: 60%;
  left: 80%;
  animation-delay: 2s;
  background: rgba(16, 185, 129, 0.8);
}

.hero-particles .particle:nth-child(3) {
  top: 30%;
  left: 70%;
  animation-delay: 4s;
  background: rgba(255, 107, 107, 0.8);
}

.hero-particles .particle:nth-child(4) {
  top: 80%;
  left: 20%;
  animation-delay: 6s;
  background: rgba(78, 205, 196, 0.8);
}

.hero-particles .particle:nth-child(5) {
  top: 40%;
  left: 40%;
  animation-delay: 1s;
  background: rgba(167, 139, 250, 0.8);
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.enhanced-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Back Button */
.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  align-self: flex-start;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateX(-4px);
}

/* Enhanced Breadcrumb */
.enhanced-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.breadcrumb-item {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.breadcrumb-separator {
  color: rgba(255, 255, 255, 0.4);
}

/* Hero Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: 
    linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #a78bfa;
  backdrop-filter: blur(10px);
  animation: badgeSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

@keyframes badgeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.badge-icon {
  color: #4ecdc4;
}

/* Hero Title */
.hero-title {
  margin: 0 0 24px 0;
  line-height: 1.1;
  letter-spacing: -0.03em;
  animation: titleSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

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

.title-main {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-accent {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #4ecdc4 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: -4px;
}

/* Hero Subtitle */
.hero-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 20px 0;
  max-width: 700px;
  line-height: 1.6;
  animation: subtitleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

@keyframes subtitleSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero Stats */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
  animation: statsSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

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

.stat-card {
  text-align: center;
  padding: 12px 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6, #4ecdc4, #10b981);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #8b5cf6 0%, #4ecdc4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
  display: block;
}

.stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* Hero Search */
.hero-search {
  width: 100%;
  max-width: 700px;
  animation: searchSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.4s both;
}

@keyframes searchSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-wrapper {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(139, 92, 246, 0.7);
  z-index: 10;
  pointer-events: none;
  width: 20px;
  height: 20px;
}

.search-input {
  width: 100%;
  padding: 20px 60px 20px 48px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: var(--text-primary, #f8f8f2);
  font-size: 16px;
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow:
    0 0 0 4px rgba(139, 92, 246, 0.1),
    0 12px 35px rgba(0, 0, 0, 0.15);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  transform: translateY(-2px);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.search-clear {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s ease;
}

.search-clear:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* ===== CONTENT AREA ===== */
.marketplace-content {
  flex: 1;
  padding: 20px;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.marketplace-content::-webkit-scrollbar {
  width: 8px;
}

.marketplace-content::-webkit-scrollbar-track {
  background: transparent;
}

.marketplace-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.marketplace-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.marketplace-grid-container {
  max-width: 1400px;
  margin: 0 auto;
  animation: contentSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

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

/* ===== LOADING STATE ===== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(139, 92, 246, 0.2);
  border-top: 4px solid var(--primary, #8b5cf6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 24px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text-primary, #f8f8f2);
}

.loading-content p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ===== ERROR STATE ===== */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.error-animation {
  position: relative;
  margin-bottom: 24px;
}

.error-icon {
  font-size: 4rem;
  opacity: 0.7;
  animation: errorBounce 2s ease-in-out infinite;
}

@keyframes errorBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.error-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.error-particles .particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(239, 68, 68, 0.6);
  border-radius: 50%;
  animation: errorParticleFloat 3s ease-in-out infinite;
}

.error-particles .particle:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.error-particles .particle:nth-child(2) {
  top: 30%;
  right: 20%;
  animation-delay: 1s;
}

.error-particles .particle:nth-child(3) {
  bottom: 20%;
  left: 50%;
  animation-delay: 2s;
}

@keyframes errorParticleFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-15px) scale(1.2);
    opacity: 1;
  }
}

.error-state h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text-primary, #f8f8f2);
}

.error-state p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px 0;
}

.retry-button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.retry-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

/* ===== FEATURED KITS SECTION ===== */
.featured-kits-section {
  margin-bottom: 30px;
  padding: 20px 0;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.02) 0%, rgba(16, 185, 129, 0.02) 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  animation: featuredSectionSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

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

.featured-kits-section .section-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 20px;
}

.featured-kits-section .section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.featured-kits-section .title-icon {
  font-size: 1.75rem;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.5));
}

.featured-kits-section .section-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.featured-kits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.featured-kit-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  animation: featuredCardSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.featured-kit-card:nth-child(1) { animation-delay: 0.1s; }
.featured-kit-card:nth-child(2) { animation-delay: 0.2s; }
.featured-kit-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes featuredCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.featured-kit-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.2),
    0 10px 30px rgba(139, 92, 246, 0.3);
}

.featured-card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  border-radius: 24px;
}

.featured-card-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

.featured-card-content {
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

.featured-kit-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  position: relative;
}

.featured-kit-icon::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 24px;
  z-index: -1;
}

.featured-kit-info {
  flex: 1;
}

.featured-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.featured-badge {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.featured-kit-name {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 0 12px 0;
  color: white;
  line-height: 1.3;
}

.featured-kit-description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.featured-kit-stats {
  display: flex;
  gap: 20px;
}

.featured-kit-stats .stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.featured-card-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
}

.featured-card-actions .btn-view,
.featured-card-actions .btn-install,
.featured-card-actions .btn-installed {
  flex: 1;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
}

.featured-card-actions .btn-view {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.featured-card-actions .btn-view:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.featured-card-actions .btn-install {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  color: white;
}

.featured-card-actions .btn-install:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.featured-card-actions .btn-installed {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  cursor: default;
}

.featured-card-actions .installed-check {
  font-weight: 800;
}

/* ===== ENHANCED DOMAINS GRID ===== */
.enhanced-domains-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

.enhanced-domain-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 32px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  overflow: hidden;
  animation: domainCardSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.enhanced-domain-card:nth-child(1) { animation-delay: 0.1s; }
.enhanced-domain-card:nth-child(2) { animation-delay: 0.2s; }
.enhanced-domain-card:nth-child(3) { animation-delay: 0.3s; }
.enhanced-domain-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes domainCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.enhanced-domain-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.2),
    0 10px 30px rgba(139, 92, 246, 0.3);
}

.domain-card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  border-radius: 24px;
}

.domain-card-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

.domain-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
}

.domain-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  flex-shrink: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  position: relative;
}

.domain-icon::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 24px;
  z-index: -1;
}

.domain-info {
  flex: 1;
}

.domain-name {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 0 12px 0;
  color: white;
  line-height: 1.3;
}

.domain-description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.domain-stats {
  display: flex;
  gap: 20px;
}

.domain-stats .stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.domain-card-arrow {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.enhanced-domain-card:hover .domain-card-arrow {
  color: rgba(139, 92, 246, 0.8);
  transform: translateY(-50%) translateX(4px);
}

/* ===== ENHANCED CATEGORIES GRID ===== */
.enhanced-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.enhanced-category-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  overflow: hidden;
  animation: categoryCardSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.enhanced-category-card:nth-child(1) { animation-delay: 0.1s; }
.enhanced-category-card:nth-child(2) { animation-delay: 0.2s; }
.enhanced-category-card:nth-child(3) { animation-delay: 0.3s; }
.enhanced-category-card:nth-child(4) { animation-delay: 0.4s; }
.enhanced-category-card:nth-child(5) { animation-delay: 0.5s; }
.enhanced-category-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes categoryCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.enhanced-category-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.15),
    0 8px 25px rgba(139, 92, 246, 0.2);
}

.category-card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.08;
  border-radius: 20px;
}

.category-card-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

.category-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
}

.category-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.category-info {
  flex: 1;
}

.category-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
  line-height: 1.3;
}

.category-description {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.category-stats {
  display: flex;
  gap: 16px;
}

.category-stats .stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.category-card-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.enhanced-category-card:hover .category-card-arrow {
  color: rgba(139, 92, 246, 0.8);
  transform: translateY(-50%) translateX(4px);
}

/* ===== ENHANCED KITS GRID ===== */
.enhanced-kits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 28px;
}

.enhanced-kit-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  overflow: hidden;
  animation: kitCardSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.enhanced-kit-card:nth-child(1) { animation-delay: 0.1s; }
.enhanced-kit-card:nth-child(2) { animation-delay: 0.2s; }
.enhanced-kit-card:nth-child(3) { animation-delay: 0.3s; }
.enhanced-kit-card:nth-child(4) { animation-delay: 0.4s; }
.enhanced-kit-card:nth-child(5) { animation-delay: 0.5s; }
.enhanced-kit-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes kitCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.enhanced-kit-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.15),
    0 6px 20px rgba(139, 92, 246, 0.2);
}

.enhanced-kit-card.installed {
  border-color: rgba(16, 185, 129, 0.3);
}

.enhanced-kit-card.installed:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.15),
    0 6px 20px rgba(16, 185, 129, 0.2);
}

.kit-card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.08;
  border-radius: 20px;
}

.kit-card-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
}

.kit-card-content {
  position: relative;
  z-index: 2;
}

.kit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.kit-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.kit-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.installed-badge,
.featured-badge {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: white;
}

.installed-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.featured-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.kit-info {
  margin-bottom: 20px;
}

.kit-name {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
  line-height: 1.3;
}

.kit-description {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.kit-stats {
  display: flex;
  gap: 16px;
}

.kit-stats .stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.kit-card-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
}

.btn-view,
.btn-install,
.btn-installed {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-view {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.btn-view:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.btn-install {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  border: none;
  color: white;
}

.btn-install:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.btn-installed {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  cursor: default;
}

.installed-check {
  font-weight: 800;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
  .enhanced-domains-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
  }

  .enhanced-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }

  .enhanced-kits-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
  }

  .hero-stats {
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .creator-marketplace-hub {
    overflow-x: hidden;
  }

  .marketplace-hero-header {
    padding: 40px 20px 60px;
  }

  .title-main {
    font-size: 3rem;
  }

  .title-accent {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }

  .stat-card {
    padding: 20px 24px;
  }

  .search-input {
    padding: 16px 50px 16px 48px;
    font-size: 14px;
  }

  .marketplace-content {
    padding: 20px;
  }

  .enhanced-domains-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .enhanced-categories-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .enhanced-kits-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .domain-card-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .category-card-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .kit-card-actions {
    flex-direction: column;
  }
}

/* ===== LIGHT MODE SUPPORT ===== */
:root[data-theme="light"] .creator-marketplace-hub {
  background:
    radial-gradient(ellipse at top, rgba(255, 123, 0, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(255, 123, 0, 0.06) 0%, transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f1f3f4 100%);
  color: #1a1a1a;
}

:root[data-theme="light"] .hero-gradient {
  background:
    linear-gradient(135deg, rgba(255, 123, 0, 0.05) 0%, transparent 50%),
    linear-gradient(225deg, rgba(255, 123, 0, 0.04) 0%, transparent 50%);
}

:root[data-theme="light"] .hero-badge {
  background:
    linear-gradient(135deg, rgba(255, 123, 0, 0.1) 0%, rgba(255, 123, 0, 0.1) 100%);
  border-color: rgba(255, 123, 0, 0.2);
  color: var(--primary, #ff7b00);
}

  .title-main {
    background: linear-gradient(135deg, #1a1a1a 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .title-accent {
    background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-subtitle {
    color: #6b7280;
  }

  .breadcrumb-item {
    color: #6b7280;
  }

  .breadcrumb-item.active {
    color: #1a1a1a;
  }

  .search-input {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
  }

  .search-input:focus {
    border-color: rgba(139, 92, 246, 0.4);
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
  }

  .search-input::placeholder {
    color: #9ca3af;
  }

  .stat-card {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
    border-color: rgba(0, 0, 0, 0.08);
  }

  .enhanced-domain-card,
  .enhanced-category-card,
  .enhanced-kit-card {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
    border-color: rgba(0, 0, 0, 0.08);
  }

  .enhanced-domain-card:hover,
  .enhanced-category-card:hover,
  .enhanced-kit-card:hover {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%);
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow:
      0 12px 35px rgba(0, 0, 0, 0.08),
      0 6px 20px rgba(139, 92, 246, 0.15);
  }

  .domain-name,
  .category-name,
  .kit-name {
    color: #1a1a1a;
  }

  .domain-description,
  .category-description,
  .kit-description {
    color: #6b7280;
  }

  .domain-stats .stat,
  .category-stats .stat,
  .kit-stats .stat {
    color: #6b7280;
  }

  .btn-view {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .btn-view:hover {
    background: rgba(255, 123, 0, 0.1);
    border-color: var(--primary, #ff7b00);
    color: var(--primary, #ff7b00);
    box-shadow: 0 4px 8px rgba(255, 123, 0, 0.15);
  }

  .loading-content h3,
  .error-state h3 {
    color: #1a1a1a;
  }

  .loading-content p,
  .error-state p {
    color: #6b7280;
  }
}
._panel_10zrf_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden; /* Container should hide overflow, let content handle scrolling */
  position: relative;
  background-color: var(--bg-surface-1, #1e1e1e);
  color: var(--text-primary, #f8f8f2);
  min-height: 0; /* Critical: Allow flex container to shrink */

  /* Isolate scrolling context for split panels */
  contain: layout style paint;
  isolation: isolate;
}

._panel_10zrf_1._dropTarget_10zrf_16 {
  background-color: rgba(0, 122, 204, 0.1);
  box-shadow: inset 0 0 0 2px var(--primary, #007acc);
}

._panel_10zrf_1._splitDragOver_10zrf_21 {
  /* Additional styling when dragging over split zones */
  position: relative;
}

/* Ensure split zones are properly positioned */
._panel_10zrf_1 .panel-split-zone {
  z-index: 9999;
}

/* Global styles for tab dragging state */
body.tab-dragging {
  cursor: grabbing !important;
  user-select: none;
}

body.tab-dragging ._panel_10zrf_1 {
  position: relative;
}

/* Enhanced visual feedback during tab dragging */
body.tab-dragging ._panel_10zrf_1 .split-drop-zone {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(59, 130, 246, 0.03) !important;
  border: 1px dashed rgba(59, 130, 246, 0.3) !important;
  transition: all 0.15s ease;
  z-index: 10000 !important;
}

body.tab-dragging ._panel_10zrf_1 .split-drop-zone:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: var(--primary, #3b82f6) !important;
}

._emptyPanel_10zrf_56 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  background: linear-gradient(135deg,
    var(--bg-surface-1, #1e1e1e) 0%,
    var(--bg-surface-2, #252525) 100%);
}

._emptyContent_10zrf_68 {
  text-align: center;
  max-width: 480px;
  width: 100%;
}

._emptyIcon_10zrf_74 {
  margin-bottom: 24px;
  color: var(--accent-color, #007acc);
  opacity: 0.8;
  display: flex;
  justify-content: center;
}

._emptyTitle_10zrf_82 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

._emptyDescription_10zrf_90 {
  font-size: 16px;
  color: var(--text-secondary, #cccccc);
  margin: 0 0 32px 0;
  line-height: 1.5;
  opacity: 0.9;
}

._quickActions_10zrf_98 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

._primaryAction_10zrf_105 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--accent-color, #007acc), var(--accent-hover, #0098ff));
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3);
}

._primaryAction_10zrf_105:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 122, 204, 0.4);
}

._secondaryAction_10zrf_127 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-surface-3, #333333);
  color: var(--text-primary, #f8f8f2);
  border: 1px solid var(--border-color, #444444);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

._secondaryAction_10zrf_127:hover {
  background: var(--bg-surface-4, #404040);
  border-color: var(--accent-color, #007acc);
  transform: translateY(-1px);
}

._helpText_10zrf_149 {
  font-size: 13px;
  color: var(--text-tertiary, #999999);
  line-height: 1.4;
  opacity: 0.8;
}

._helpText_10zrf_149 kbd {
  background: var(--bg-surface-3, #333333);
  border: 1px solid var(--border-color, #444444);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 11px;
  margin: 0 2px;
}

/* Light theme overrides */
:root[data-theme="light"] ._panel_10zrf_1 {
  background-color: var(--bg-surface-1-light, #ffffff);
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] ._emptyPanel_10zrf_56 {
  background: linear-gradient(135deg,
    var(--bg-surface-1-light, #ffffff) 0%,
    var(--bg-surface-2-light, #f3f3f3) 100%);
}

:root[data-theme="light"] ._emptyTitle_10zrf_82 {
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] ._emptyDescription_10zrf_90 {
  color: var(--text-secondary-light, #666666);
}

:root[data-theme="light"] ._secondaryAction_10zrf_127 {
  background: var(--bg-surface-3-light, #e8e8e8);
  color: var(--text-primary-light, #333333);
  border-color: var(--border-primary-light, #e7e7e7);
}

:root[data-theme="light"] ._secondaryAction_10zrf_127:hover {
  background: var(--bg-surface-4-light, #dcdcdc);
}

:root[data-theme="light"] ._helpText_10zrf_149 {
  color: var(--text-tertiary, #999999);
}

:root[data-theme="light"] ._helpText_10zrf_149 kbd {
  background: var(--bg-surface-3-light, #e8e8e8);
  border-color: var(--border-primary-light, #e7e7e7);
}

/* Responsive design */
@media (max-width: 600px) {
  ._emptyContent_10zrf_68 {
    max-width: 100%;
    padding: 0 10px;
  }

  ._emptyTitle_10zrf_82 {
    font-size: 20px;
  }

  ._emptyDescription_10zrf_90 {
    font-size: 14px;
  }

  ._quickActions_10zrf_98 {
    gap: 10px;
  }

  ._primaryAction_10zrf_105,
  ._secondaryAction_10zrf_127 {
    padding: 12px 16px;
    font-size: 14px;
  }
}
/**
 * Split Drop Zone Styles
 * Specialized styling for panel split drop zones
 */

.split-drop-zone {
  position: absolute;
  background: transparent;
  transition: all 0.2s ease;
  z-index: 9999; /* Higher z-index to ensure it's above content */
  pointer-events: none; /* Only active during drag operations */
  opacity: 0; /* Hidden by default */
}

/* Show split zones when tab dragging is active */
:global(.tab-dragging) .split-drop-zone {
  pointer-events: auto !important;
  opacity: 1 !important;
  background: rgba(59, 130, 246, 0.05);
  border: 1px dashed var(--primary, #3b82f6);
}

/* Position-specific sizing and placement */
.split-drop-zone.split-top {
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
}

.split-drop-zone.split-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
}

.split-drop-zone.split-left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 60px;
}

.split-drop-zone.split-right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 60px;
}

/* Active states during drag operations */
.split-drop-zone.drag-over-allowed {
  pointer-events: auto;
  background: var(--primary-bg, rgba(59, 130, 246, 0.15));
  border: 2px solid var(--primary, #3b82f6);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  animation: pulseAllowed 1.5s ease-in-out infinite;
}

.split-drop-zone.drag-over-denied {
  pointer-events: auto;
  background: var(--error-bg, rgba(239, 68, 68, 0.15));
  border: 2px solid var(--error, #ef4444);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
  animation: pulseDenied 1.5s ease-in-out infinite;
}

.split-drop-zone.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Split indicator overlay */
.split-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  background: var(--bg-surface-1, #ffffff);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 2px solid;
  transition: all 0.2s ease;
  min-width: 120px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.split-indicator.allowed {
  border-color: var(--success, #10b981);
  color: var(--success, #10b981);
}

.split-indicator.denied {
  border-color: var(--error, #ef4444);
  color: var(--error, #ef4444);
}

.split-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: currentColor;
  color: var(--bg-surface-1, #ffffff);
}

.split-message {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Position-specific indicator adjustments */
.split-drop-zone.split-top .split-indicator {
  top: 30px;
  transform: translateX(-50%);
}

.split-drop-zone.split-bottom .split-indicator {
  bottom: 30px;
  top: auto;
  transform: translateX(-50%);
}

.split-drop-zone.split-left .split-indicator {
  left: 30px;
  transform: translateY(-50%);
}

.split-drop-zone.split-right .split-indicator {
  right: 30px;
  left: auto;
  transform: translateY(-50%);
}

/* Hover effects for better visual feedback */
.split-drop-zone.drag-over-allowed:hover {
  background: var(--primary-bg, rgba(59, 130, 246, 0.15));
}

.split-drop-zone.drag-over-denied:hover {
  background: var(--error-bg, rgba(239, 68, 68, 0.15));
}

/* Animation for smooth transitions */
@keyframes splitFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.split-indicator {
  animation: splitFadeIn 0.2s ease;
}

/* Position-specific animations */
.split-drop-zone.split-top .split-indicator {
  animation: splitFadeIn 0.2s ease;
  transform-origin: center top;
}

.split-drop-zone.split-bottom .split-indicator {
  animation: splitFadeIn 0.2s ease;
  transform-origin: center bottom;
}

.split-drop-zone.split-left .split-indicator {
  animation: splitFadeIn 0.2s ease;
  transform-origin: left center;
}

.split-drop-zone.split-right .split-indicator {
  animation: splitFadeIn 0.2s ease;
  transform-origin: right center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .split-drop-zone.split-top,
  .split-drop-zone.split-bottom {
    height: 40px;
  }
  
  .split-drop-zone.split-left,
  .split-drop-zone.split-right {
    width: 40px;
  }
  
  .split-indicator {
    padding: 0.75rem;
    min-width: 100px;
  }
  
  .split-icon {
    width: 24px;
    height: 24px;
  }
  
  .split-message {
    font-size: 0.75rem;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .split-drop-zone.drag-over-allowed {
    border-width: 3px;
  }
  
  .split-drop-zone.drag-over-denied {
    border-width: 3px;
  }
  
  .split-indicator {
    border-width: 3px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}

/* Pulse animations for enhanced feedback */
@keyframes pulseAllowed {
  0%, 100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    border-color: var(--primary, #3b82f6);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    border-color: rgba(59, 130, 246, 0.8);
  }
}

@keyframes pulseDenied {
  0%, 100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
    border-color: var(--error, #ef4444);
  }
  50% {
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
    border-color: rgba(239, 68, 68, 0.8);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .split-drop-zone,
  .split-indicator {
    transition: none;
    animation: none;
  }
}
._tabBar_1khk2_1 {
  display: flex;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  background-color: var(--bg-surface-2, #252526);
  border-bottom: 1px solid var(--border-primary, #444444);
  overflow-x: auto;
  overflow-y: hidden;
  /* One level above the base */
  z-index: 2;
  position: relative;
  flex-shrink: 0;
  flex-direction: row; /* HORIZONTAL layout */
}

._tabBarContent_1khk2_17 {
  display: flex;
  flex-direction: row; /* HORIZONTAL layout */
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  height: 35px;
}

._ungroupedTabs_1khk2_27 {
  display: flex;
  flex-direction: row; /* HORIZONTAL layout */
  flex-wrap: nowrap;
  overflow-x: auto;
  height: 35px;
  width: 100%;
  margin-bottom: 0;
  border-bottom: none;
}

._tabBarActions_1khk2_38 {
  display: flex;
  align-items: center;
  position: sticky;
  bottom: 0;
  right: 0;
  background-color: var(--bg-surface-2, #252526);
  padding: 0 8px;
  height: 35px;
  border-top: 1px solid var(--border-primary, #444444);
}

._tabBar_1khk2_1::-webkit-scrollbar {
  height: 4px;
}

._tabBar_1khk2_1::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color, #666);
  border-radius: 2px;
}

._tabBar_1khk2_1::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color, #333);
}

._tab_1khk2_1 {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 100%;
  min-width: 120px;
  max-width: 220px;
  border-right: 1px solid var(--border-primary, #444444);
  background-color: var(--bg-surface-2, #252526);
  color: var(--text-primary, #f8f8f2);
  cursor: pointer;
  transition: background-color 0.1s ease;
  position: relative;
  user-select: none;
  /* Make tabs look more like file tabs */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-right: 2px;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0; /* Prevent tabs from shrinking */
}

._tab_1khk2_1:hover {
  background-color: var(--bg-surface-3, #2d2d2d);
}

._tab_1khk2_1._active_1khk2_89 {
  background-color: var(--bg-surface-1, #1e1e1e);
  color: var(--text-primary, #f8f8f2);
  /* Make active tab stand out more */
  border-bottom: none;
  z-index: 2;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* Top line for active tab in VS Code style */
._tab_1khk2_1._active_1khk2_89::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary, #007acc);
  z-index: 1;
}





._tab_1khk2_1._dragging_1khk2_114 {
  opacity: 0.5;
  box-shadow: 0 0 8px rgba(0, 122, 204, 0.5);
  z-index: 10;
}

/* Drop zone indicator */
._dropZone_1khk2_121 {
  position: absolute;
  width: 4px;
  height: 80%;
  background-color: var(--primary, #007acc);
  border-radius: 2px;
  top: 10%;
  z-index: 5;
  transition: opacity 0.2s ease, transform 0.1s ease;
  pointer-events: none;
  opacity: 0.8;
}

/* Smoother tab dragging */
body._tab-dragging_1khk2_135 ._tab-item_1khk2_135 {
  transition: transform 0.15s ease;
}

body._tab-dragging_1khk2_135 ._tab-item_1khk2_135:not(._dragging_1khk2_114) {
  pointer-events: auto;
}

/* Reduce drop zone interference */
._ungroupedTabs_1khk2_27 {
  position: relative;
}

._ungroupedTabs_1khk2_27._dropTarget_1khk2_148 {
  background-color: rgba(0, 122, 204, 0.05);
  transition: background-color 0.2s ease;
}

._tabIcon_1khk2_153 {
  margin-right: 8px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  color: var(--text-secondary, #cccccc);
}

._tabTitle_1khk2_163 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
  /* Add a subtle text shadow for better readability */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}



._tabActions_1khk2_176 {
  display: flex;
  align-items: center;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

._tab_1khk2_1:hover ._tabActions_1khk2_176,
._tab_1khk2_1._active_1khk2_89 ._tabActions_1khk2_176 {
  opacity: 1;
}

._tabSave_1khk2_189,
._tabClose_1khk2_190 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary, #cccccc);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._tabSave_1khk2_189 {
  font-size: 10px;
}

._tabSave_1khk2_189:hover {
  background-color: rgba(0, 122, 204, 0.2);
  color: var(--text-primary, #ffffff);
}

._tabClose_1khk2_190:hover {
  background-color: rgba(255, 70, 70, 0.2);
  color: var(--text-primary, #ffffff);
}



._dropTarget_1khk2_148 {
  background-color: rgba(0, 122, 204, 0.1);
}

/* Tab group dialog styles removed */

/* Light theme overrides */
:root[data-theme="light"] ._tabBar_1khk2_1 {
  background-color: var(--bg-surface-2-light, #f3f3f3);
  border-bottom-color: var(--border-primary-light, #e7e7e7);
}

:root[data-theme="light"] ._tab_1khk2_1 {
  background-color: var(--bg-surface-2-light, #f3f3f3);
  border-right-color: var(--border-primary-light, #e7e7e7);
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] ._tab_1khk2_1:hover {
  background-color: var(--bg-surface-3-light, #e8e8e8);
}

:root[data-theme="light"] ._tab_1khk2_1._active_1khk2_89 {
  background-color: var(--bg-surface-1-light, #ffffff);
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] ._tabClose_1khk2_190,
:root[data-theme="light"] ._tabSave_1khk2_189 {
  color: var(--text-secondary-light, #666666);
}



:root[data-theme="light"] ._tabBarActions_1khk2_38 {
  background-color: var(--bg-surface-2-light, #f3f3f3);
  border-top-color: var(--border-primary-light, #e7e7e7);
}

/* Light theme scrollbar overrides */
:root[data-theme="light"] ._tabBar_1khk2_1::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color, #cccccc);
}

:root[data-theme="light"] ._tabBar_1khk2_1::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color, #f3f3f3);
}

:root[data-theme="light"] ._tabIcon_1khk2_153 {
  color: var(--text-secondary-light, #666666);
}

:root[data-theme="light"] ._tabTitle_1khk2_163 {
  text-shadow: none;
}

/* Light theme tab group styles removed */
._tabOverflowContainer_pw9yn_1 {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

._tabOverflowButton_pw9yn_8 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
  background-color: transparent;
  border: none;
  color: var(--text-secondary, #cccccc);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

._tabOverflowButton_pw9yn_8:hover {
  background-color: var(--bg-surface-3, #2d2d2d);
}

._tabOverflowIcon_pw9yn_25 {
  font-size: 16px;
  margin-right: 4px;
}

._tabCount_pw9yn_30 {
  font-size: 12px;
  background-color: var(--primary, #007acc);
  color: var(--text-on-primary, #ffffff);
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
}

._tabOverflowMenu_pw9yn_40 {
  position: absolute;
  top: 100%;
  right: 0;
  width: 250px;
  max-height: 400px;
  background-color: var(--bg-surface-2, #252526);
  border: 1px solid var(--border-primary, #444444);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tabOverflowHeader_pw9yn_56 {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #cccccc);
  background-color: var(--bg-surface-3, #2d2d2d);
  border-bottom: 1px solid var(--border-primary, #444444);
}

._tabOverflowList_pw9yn_65 {
  overflow-y: auto;
  max-height: 350px;
}

._tabOverflowList_pw9yn_65::-webkit-scrollbar {
  width: 6px;
}

._tabOverflowList_pw9yn_65::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color, #666);
  border-radius: 3px;
}

._tabOverflowList_pw9yn_65::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color, #333);
}

._tabOverflowItem_pw9yn_83 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  color: var(--text-primary, #f8f8f2);
  border-left: 2px solid transparent;
}

._tabOverflowItem_pw9yn_83:hover {
  background-color: var(--bg-surface-3, #2d2d2d);
}

._tabOverflowItem_pw9yn_83._active_pw9yn_98 {
  background-color: var(--bg-surface-3, #2d2d2d);
  border-left: 2px solid var(--primary, #007acc);
}

._tabOverflowItemContent_pw9yn_103 {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

._tabOverflowItemIcon_pw9yn_110 {
  margin-right: 8px;
  font-size: 14px;
}

._tabOverflowItemTitle_pw9yn_115 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

._tabOverflowItemDirty_pw9yn_122 {
  margin-left: 6px;
  font-size: 14px;
  color: var(--primary, #007acc);
  animation: _pulse_pw9yn_1 2s infinite;
}

._tabOverflowItemClose_pw9yn_129 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary, #cccccc);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
  margin-left: 8px;
}

._tabOverflowItemClose_pw9yn_129:hover {
  background-color: rgba(255, 70, 70, 0.2);
  color: var(--text-primary, #ffffff);
  opacity: 1;
}

/* Light theme overrides */
:root[data-theme="light"] ._tabOverflowButton_pw9yn_8 {
  color: var(--text-secondary-light, #666666);
}

:root[data-theme="light"] ._tabOverflowButton_pw9yn_8:hover {
  background-color: var(--bg-surface-3-light, #e8e8e8);
}

:root[data-theme="light"] ._tabOverflowMenu_pw9yn_40 {
  background-color: var(--bg-surface-2-light, #f3f3f3);
  border-color: var(--border-primary-light, #e7e7e7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] ._tabOverflowHeader_pw9yn_56 {
  background-color: var(--bg-surface-3-light, #e8e8e8);
  border-color: var(--border-primary-light, #e7e7e7);
  color: var(--text-secondary-light, #666666);
}

:root[data-theme="light"] ._tabOverflowItem_pw9yn_83 {
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] ._tabOverflowItem_pw9yn_83:hover,
:root[data-theme="light"] ._tabOverflowItem_pw9yn_83._active_pw9yn_98 {
  background-color: var(--bg-surface-3-light, #e8e8e8);
}
/* TabBarHorizontal.css */
/* This file contains CSS for regular horizontal tabs */

/* Tab bar container */
.tabBar {
  display: flex !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  background-color: var(--bg-surface-2, #252526) !important;
  border-bottom: 1px solid var(--border-primary, #444444) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  z-index: 100 !important;
  position: relative !important;
  flex-shrink: 0 !important;
  flex-direction: row !important; /* HORIZONTAL layout */
  width: 100% !important;
}

/* Tab bar content */
.tabBarContent {
  display: flex !important;
  flex-direction: row !important; /* HORIZONTAL layout */
  flex: 1 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 !important;
  width: 100% !important;
  height: 35px !important;
}

/* Ungrouped tabs container */
.ungroupedTabs {
  display: flex !important;
  flex-direction: row !important; /* HORIZONTAL layout */
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  height: 35px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  position: relative !important;
  border-bottom: none !important;
  background-color: var(--bg-surface-2, #252526) !important;
}

/* Tab items */
.tab {
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  height: 100% !important;
  min-width: 120px !important;
  max-width: 220px !important;
  border-right: 1px solid var(--border-primary, #444444) !important;
  background-color: var(--bg-surface-2, #252526) !important;
  color: var(--text-primary, #f8f8f2) !important;
  cursor: pointer !important;
  transition: background-color 0.1s ease !important;
  position: relative !important;
  user-select: none !important;
  border-top-left-radius: 4px !important; /* Restore border radius */
  border-top-right-radius: 4px !important; /* Restore border radius */
  margin-right: 2px !important; /* Add margin between tabs */
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1) !important; /* Add subtle shadow */
  flex-shrink: 0 !important;
}

/* Active tab */
.tab.active {
  background-color: var(--bg-surface-1, #1e1e1e) !important;
  color: var(--text-primary, #f8f8f2) !important;
  border-bottom: none !important;
  z-index: 2 !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
  /* Add a top border in primary color */
  border-top: 2px solid var(--primary, #007acc) !important;
}



/* Workspace manager */
.workspaceManager {
  display: flex !important;
  flex-direction: column !important;
  /* Removed height: 100% to allow proper flexbox resizing when voice bar appears */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Panel container */
.panelContainer {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}

/* Main content area */
.mainContentArea, .mainContent {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}

/* Light theme overrides */
:root[data-theme="light"] .tabBar {
  background-color: var(--bg-surface-2-light, #f3f3f3) !important;
  border-bottom-color: var(--border-primary-light, #e7e7e7) !important;
}

:root[data-theme="light"] .ungroupedTabs {
  background-color: var(--bg-surface-2-light, #f3f3f3) !important;
}

:root[data-theme="light"] .tab {
  background-color: var(--bg-surface-2-light, #f3f3f3) !important;
  border-right-color: var(--border-primary-light, #e7e7e7) !important;
  color: var(--text-primary-light, #333333) !important;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] .tab.active {
  background-color: var(--bg-surface-1-light, #ffffff) !important;
  color: var(--text-primary-light, #333333) !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
  border-top: 2px solid var(--primary, #007acc) !important;
}



/* Light theme hover states */
:root[data-theme="light"] .tab:hover {
  background-color: var(--bg-surface-3-light, #e8e8e8) !important;
}

/* Light theme scrollbar overrides */
:root[data-theme="light"] .tabBar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color, #cccccc) !important;
}

:root[data-theme="light"] .tabBar::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color, #f3f3f3) !important;
}

:root[data-theme="light"] .ungroupedTabs::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color, #cccccc) !important;
}

:root[data-theme="light"] .ungroupedTabs::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color, #f3f3f3) !important;
}
/* Living Creative Dashboard - Revolutionary welcome experience styles */

._dashboard_rxw1l_3 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  overflow: visible;
  background: linear-gradient(135deg,
    var(--bg-surface-1, #1e1e1e) 0%,
    var(--bg-surface-2, #252525) 100%);
}

._backgroundCanvas_rxw1l_15 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

._content_rxw1l_25 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 6rem 3rem 3rem 3rem;
  overflow: visible;
  justify-content: flex-start;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Section */
._heroSection_rxw1l_40 {
  text-align: center;
  margin-bottom: 3rem;
  width: 100%;
}

._inspiringQuote_rxw1l_46 {
  font-size: 24px;
  font-style: italic;
  color: var(--accent-color, #007acc);
  margin: 0 0 8px 0;
  font-weight: 300;
}

._quoteAuthor_rxw1l_54 {
  font-size: 16px;
  color: var(--text-secondary, #cccccc);
  margin-bottom: 32px;
  display: block;
}

._welcomeTitle_rxw1l_61 {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin: 0 0 16px 0;
  line-height: 1.2;
}

._welcomeSubtitle_rxw1l_69 {
  font-size: 18px;
  color: var(--text-secondary, #cccccc);
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
}

._projectPulse_rxw1l_77 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--accent-color, #007acc);
  font-size: 14px;
}

._pulseIndicator_rxw1l_87 {
  width: 8px;
  height: 8px;
  background: var(--accent-color, #007acc);
  border-radius: 50%;
  animation: _pulse_rxw1l_87 2s infinite;
}

@keyframes _pulse_rxw1l_87 {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Quick Actions */
._quickActions_rxw1l_101 {
  margin-bottom: 40px;
}

._quickActions_rxw1l_101 h2 {
  font-size: 20px;
  color: var(--text-primary, #f8f8f2);
  margin: 0 0 24px 0;
  text-align: center;
}

._actionGrid_rxw1l_112 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

._actionCard_rxw1l_120 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  background: var(--bg-surface-3, #333333);
  border: 1px solid var(--border-color, #444444);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

._actionCard_rxw1l_120:hover {
  transform: translateY(-4px);
  border-color: var(--accent-color, #007acc);
  box-shadow: 0 8px 24px rgba(0, 122, 204, 0.2);
}

._actionCard_rxw1l_120._hovered_rxw1l_140 {
  background: var(--bg-surface-4, #404040);
}

._actionIcon_rxw1l_144 {
  font-size: 32px;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

._actionCard_rxw1l_120:hover ._actionIcon_rxw1l_144 {
  transform: scale(1.1);
}

._actionLabel_rxw1l_154 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin-bottom: 4px;
}

._actionDesc_rxw1l_161 {
  font-size: 12px;
  color: var(--text-secondary, #cccccc);
  text-align: center;
  line-height: 1.3;
}

._livePreview_rxw1l_168 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 122, 204, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: _fadeIn_rxw1l_1 0.3s ease;
}

._previewContent_rxw1l_181 {
  color: var(--accent-color, #007acc);
  font-size: 14px;
  font-weight: 500;
}

@keyframes _fadeIn_rxw1l_1 {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Clean, minimal styles only */

/* Creative Companion */
._creativeCompanion_rxw1l_195 {
  text-align: center;
  margin: 2rem auto 0 auto;
  width: 100%;
  max-width: 800px;
}

._companionCharacter_rxw1l_202 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: _gentle-bounce_rxw1l_1 3s ease-in-out infinite;
  display: block;
  text-align: center;
}

@keyframes _gentle-bounce_rxw1l_1 {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

._tagline_rxw1l_215 {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-color, #007acc) 0%, #00a8ff 50%, #ff6b6b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 1rem 0;
  line-height: 1.4;
  text-align: center;
  letter-spacing: -0.02em;
}

._companionMessage_rxw1l_228 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-secondary, #cccccc);
  margin: 0 0 2.5rem 0;
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

._magicButton_rxw1l_239 {
  background: linear-gradient(135deg, var(--accent-color, #007acc) 0%, #00a8ff 100%);
  border: none;
  border-radius: 50px;
  padding: 1.25rem 3rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(0, 122, 204, 0.3);
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

._magicButton_rxw1l_239::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;
}

._magicButton_rxw1l_239:hover::before {
  left: 100%;
}

._magicButton_rxw1l_239:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 122, 204, 0.5);
  background: linear-gradient(135deg, #0088dd 0%, #00b8ff 100%);
}

._magicButton_rxw1l_239:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 122, 204, 0.4);
}

/* Journey Tracker - Beautiful day counter with quote */
._journeyTracker_rxw1l_282 {
  margin: 3rem 0 0 0;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Day badge inside quote */
._quoteHeader_rxw1l_291 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

._dayBadge_rxw1l_297 {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: var(--accent-color);
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

._dailyQuote_rxw1l_311 {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  position: relative;
  margin-top: 1rem;
}

._dailyQuote_rxw1l_311::before {
  content: '"';
  position: absolute;
  top: -0.25rem;
  left: 1rem;
  font-size: 2.5rem;
  color: var(--accent-color);
  opacity: 0.2;
  font-family: serif;
}

._quoteText_rxw1l_332 {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
  font-weight: 400;
  position: relative;
  z-index: 1;
  opacity: 0.9;
}

._quoteAuthor_rxw1l_54 {
  font-size: 0.875rem;
  color: var(--accent-color);
  font-weight: 500;
  font-style: normal;
  opacity: 0.7;
}

/* Help Text */
._helpText_rxw1l_353 {
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary, #999999);
  margin-top: 32px;
  opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
  ._content_rxw1l_25 {
    padding: 20px;
  }

  ._twoColumnLayout_rxw1l_367,
  ._strategicDashboard_rxw1l_368 {
    grid-template-columns: 1fr;
  }

  ._actionGrid_rxw1l_112 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* Journey Tracker Mobile Styles */
  ._journeyTracker_rxw1l_282 {
    margin: 1.5rem 0 0 0;
    padding: 0 1rem;
  }

  ._dayBadge_rxw1l_297 {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
  }

  ._dailyQuote_rxw1l_311 {
    padding: 1.25rem;
  }

  ._quoteText_rxw1l_332 {
    font-size: 1rem;
  }

  ._dailyQuote_rxw1l_311::before {
    font-size: 2rem;
    top: -0.125rem;
    left: 0.75rem;
  }

  ._welcomeTitle_rxw1l_61 {
    font-size: 24px;
  }

  ._connectionMap_rxw1l_405 {
    flex-direction: column;
    gap: 16px;
  }

  ._node_rxw1l_410::after {
    display: none;
  }
}
._resizer_e1ntg_1 {
  background-color: rgba(60, 60, 60, 0.5);
  transition: background-color 0.2s ease;
  user-select: none;
  flex-shrink: 0;
}

._resizer_e1ntg_1:hover {
  background-color: var(--primary, #007acc);
}

._horizontal_e1ntg_12 {
  width: 100%;
  height: 2px;
  cursor: row-resize;
}

._vertical_e1ntg_18 {
  width: 2px;
  height: 100%;
  cursor: col-resize;
}
._panelContainer_1wrb3_1 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%; /* Fill available space */
  overflow: hidden; /* Container should hide overflow, let content handle scrolling */
  position: relative;
  background-color: var(--bg-surface-1, #1e1e1e);
  min-height: 0; /* Critical: Allow flex container to shrink */
}

._panelGroup_1wrb3_12 {
  display: flex;
  overflow: hidden; /* Container should hide overflow, let content handle scrolling */
  position: relative;
  min-height: 0; /* Critical: Allow flex container to shrink */
}

._row_1wrb3_19 {
  flex-direction: row;
  width: 100%;
  height: 100%;
}

._column_1wrb3_25 {
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Light theme overrides */
:root[data-theme="light"] ._panelContainer_1wrb3_1 {
  background-color: var(--bg-surface-1-light, #ffffff);
}
.keyboard-shortcuts-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.keyboard-shortcuts-dialog {
  background-color: #36393f;
  border-radius: 5px;
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: #dcddde;
  display: flex;
  flex-direction: column;
}

.keyboard-shortcuts-header {
  padding: 16px;
  border-bottom: 1px solid #202225;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.keyboard-shortcuts-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.close-button {
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: #dcddde;
}

.keyboard-shortcuts-content {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.shortcut-section {
  margin-bottom: 24px;
}

.shortcut-section h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid #202225;
}

.shortcut-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  background-color: #2f3136;
}

.shortcut-keys {
  display: flex;
  gap: 4px;
  margin-right: 12px;
}

kbd {
  background-color: #202225;
  border: 1px solid #4f545c;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  color: #dcddde;
  display: inline-block;
  font-family: monospace;
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
  white-space: nowrap;
}

.shortcut-description {
  flex: 1;
  font-size: 14px;
  color: #b9bbbe;
}

.keyboard-shortcuts-footer {
  padding: 12px 16px;
  border-top: 1px solid #202225;
  text-align: center;
  font-size: 12px;
  color: #b9bbbe;
}

.keyboard-shortcuts-footer p {
  margin: 0;
}

.no-shortcuts {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #b9bbbe;
  text-align: center;
  font-size: 14px;
}
/* packages/frontend/src/components/layout/ActivityBar.module.css */
._activityBar_bupmg_2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px; /* Increased width to accommodate labels */
  background-color: var(--bg-darker);
  border-right: 1px solid var(--border-color);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  height: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 4; /* Just below header but above other elements */
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
}

._domainItemsContainer_bupmg_18 {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* Reduced gap since items are taller now */
  width: 100%;
  align-items: center;
}

._domainItem_bupmg_18 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px; /* Increased width for labels */
  height: 64px; /* Increased height for icon + label */
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  gap: 4px; /* Space between icon and label */
}

._domainItem_bupmg_18::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 70%;
  background-color: var(--domain-color, var(--primary));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: transform 0.2s ease;
}

._domainItem_bupmg_18:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

._domainItem_bupmg_18._active_bupmg_62 {
  color: var(--primary) !important;
  background-color: var(--primary-light) !important;
}

._domainItem_bupmg_18._active_bupmg_62::before {
  transform: translateY(-50%) scaleY(1);
}

/* Force all domains to use accent color */
._domain-create_bupmg_72 { --domain-color: var(--primary) !important; }
._domain-library_bupmg_73 { --domain-color: var(--primary) !important; }
._domain-organize_bupmg_74 { --domain-color: var(--primary) !important; }
._domain-build_bupmg_75 { --domain-color: var(--primary) !important; }
._domain-connect_bupmg_76 { --domain-color: var(--primary) !important; }
._domain-discover_bupmg_77 { --domain-color: var(--primary) !important; }
._domain-meta_bupmg_78 { --domain-color: var(--primary) !important; }

._domainIcon_bupmg_80 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Make icons slightly smaller to accommodate labels */
._domainIcon_bupmg_80 svg {
  width: 20px;
  height: 20px;
}

/* Clean labels underneath icons */
._domainLabel_bupmg_94 {
  font-size: 0.75rem; /* Increased from 0.65rem for better visibility */
  font-weight: 600; /* Increased from 500 for better visibility */
  color: inherit;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px; /* Slightly less than button width for padding */
  margin-top: 2px;
  opacity: 1; /* Increased from 0.8 for better visibility */
  transition: opacity 0.2s ease;
  letter-spacing: 0.02em; /* Slightly tighter letter spacing for better fit */
}

._domainItem_bupmg_18:hover ._domainLabel_bupmg_94 {
  opacity: 1;
}

._domainItem_bupmg_18._active_bupmg_62 ._domainLabel_bupmg_94 {
  opacity: 1;
  font-weight: 600;
  color: var(--primary);
}

/* Light theme overrides */
:root[data-theme="light"] ._activityBar_bupmg_2 {
  background-color: var(--bg-darker);
  border-right-color: var(--border-color);
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] ._domainItem_bupmg_18._active_bupmg_62 {
  background-color: var(--bg-selected);
}

:root[data-theme="light"] ._domainLabel_bupmg_94 {
  background-color: var(--bg-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
  ._activityBar_bupmg_2 {
    width: 60px; /* Smaller on mobile */
  }

  ._domainItem_bupmg_18 {
    width: 48px;
    height: 48px;
  }

  ._domainLabel_bupmg_94 {
    font-size: 0.6rem;
    max-width: 44px;
  }
}

/* Very small screens - hide labels */
@media (max-width: 480px) {
  ._domainLabel_bupmg_94 {
    display: none;
  }

  ._domainItem_bupmg_18 {
    height: 48px;
    gap: 0;
  }

  ._activityBar_bupmg_2 {
    width: 60px;
  }
}

/* Specific domain classes for potential icon/style overrides if not using inline style for color */
._domain-create_bupmg_72::before { /* background-color: #00e676; */ }
._domain-organize_bupmg_74::before { /* background-color: #ffb347; */ }
._domain-build_bupmg_75::before { /* background-color: #b78fde; */ }
._domain-connect_bupmg_76::before { /* background-color: #ff2d75; */ }
._domain-discover_bupmg_77::before { /* background-color: #2979ff; */ }
._domain-meta_bupmg_78::before { /* background-color: #00bcd4; */ }

/* .domainLabel {
  display: none;
  position: absolute;
  left: 110%;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--current-bg-accent);
  color: var(--current-text-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  white-space: nowrap;
  z-index: 110;
  font-size: 0.8rem;
}

.domainItem:hover .domainLabel {
  display: block;
} *//* packages/frontend/src/components/layout/BottomPanel.module.css */
._bottomPanel_1jdaz_2 {
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-dark);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  transition: height 0.3s ease;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

._open_1jdaz_16 {
  /* height controlled by inline style */
}

._collapsed_1jdaz_20 {
  height: 40px !important; /* Height of header when fully collapsed by button */
}

._panelHeader_1jdaz_24 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
  height: var(--toolbar-height, 40px);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  cursor: default;
  background-color: var(--bg-darker);
}

/* Resizer will be added by Layout.tsx, likely just above this panel,
   or this panel itself will have a Resizer at its top if it manages its own resize handle. */

._tabsPlaceholder_1jdaz_39 {
  display: flex;
  gap: var(--space-sm);
}

._tabButton_1jdaz_44 {
  background: none;
  border: none;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent; 
  transition: all 0.2s ease;
}

._tabButton_1jdaz_44:hover {
  color: var(--text-primary);
}

._activeTab_1jdaz_58 {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

._toggleButton_1jdaz_63 {
  padding: var(--space-xs) var(--space-sm);
  background-color: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

._toggleButton_1jdaz_63:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

._panelContent_1jdaz_80 {
  flex-grow: 1;
  padding: var(--space-md);
  overflow-y: auto;
  font-family: var(--font-family-monospace);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--bg-medium);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Custom Scrollbar Styles */
._panelContent_1jdaz_80::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

._panelContent_1jdaz_80::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: calc(var(--scrollbar-width) / 2);
}

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

._consoleOutput_1jdaz_109 {
  flex-grow: 1;
  width: 100%;
  background-color: var(--bg-darker);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-family: inherit;
  font-size: inherit;
  resize: none;
  box-sizing: border-box;
  min-height: 0;
}

/* Light theme overrides */
:root[data-theme="light"] ._bottomPanel_1jdaz_2 {
  background-color: var(--bg-dark);
  border-top-color: var(--border-color);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] ._panelHeader_1jdaz_24 {
  background-color: var(--bg-darker);
  border-bottom-color: var(--border-color);
}

:root[data-theme="light"] ._panelContent_1jdaz_80 {
  background-color: var(--bg-medium);
}

:root[data-theme="light"] ._consoleOutput_1jdaz_109 {
  background-color: var(--bg-darker);
  border-color: var(--border-color);
} /* RightPanel Component Styles */
.right-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0; /* Allow content to shrink */
  max-width: 100%; /* Don't exceed container width */
  background-color: var(--bg-surface-2, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
  box-sizing: border-box;
  overflow: hidden;
}

/* Ensure tabs resize properly during panel resize */
body.resizing-panel .right-panel,
body.resizing-panel .right-panel-tabs,
body.resizing-panel .panel-tab,
body.resizing-panel .right-panel-content,
body.resizing-panel .right-panel-content > *,
body.resizing-right-panel .right-panel,
body.resizing-right-panel .right-panel-tabs,
body.resizing-right-panel .panel-tab,
body.resizing-right-panel .right-panel-content,
body.resizing-right-panel .right-panel-content > *,
body.resizing-right-panel .right-panel-container {
  transition: none !important;
}

/* Header and tabs */
.right-panel-header {
  display: flex;
  align-items: center;
  padding: 0;
  background-color: var(--bg-surface-2, #181825);
  border-bottom: 1px solid var(--border-primary, #3c3c3c);
  height: 40px;
  flex-shrink: 0;
  width: 100%;
  overflow: visible;
  z-index: 10;
}

.right-panel-tabs {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.panel-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  border: none;
  background: none;
  color: var(--text-secondary, #6c7086);
  cursor: pointer;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}

.panel-tab:hover {
  color: var(--text-primary, #f8f8f2);
  background-color: var(--bg-surface-3, #313244);
}

.panel-tab.active {
  color: var(--text-primary, #ffffff);
  background-color: var(--primary, #0078d4);
  font-weight: 500;
}

/* Panel content area */
.right-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0; /* Important for flex scrolling */
  transition: width 0.1s ease-out; /* Smooth width transitions */
}

/* Remove padding for chat container to reach edges */
.right-panel-content:has(.chat-container) {
  padding: 0;
}

/* Ensure all direct children of right-panel-content take full width and height */
.right-panel-content > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0; /* Important for flex scrolling */
  transition: width 0.1s ease-out; /* Smooth width transitions */
}

/* Special handling for block explorers in right panel */
.right-panel-content .block-explorer,
.right-panel-content .enhanced-block-explorer {
  height: 100%;
  flex: 1;
  min-height: 0; /* Important for flex scrolling */
}

/* Context Panel Styles */
.context-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.context-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.context-section h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary, #6c7086);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
}

.context-item:hover {
  background-color: var(--bg-light, #313244);
}

.context-icon {
  font-size: 16px;
}

.context-label {
  font-size: 13px;
  color: var(--text-primary, #f8f8f2);
}

/* Tools Panel Styles */
.tools-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.tools-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tools-section h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary, #6c7086);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tool-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background-color: var(--bg-light, #313244);
  color: var(--text-primary, #f8f8f2);
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}

.tool-button:hover {
  background-color: var(--primary, #bd93f9);
  color: var(--bg-dark, #181825);
}

.tool-icon {
  font-size: 16px;
}

/* History Panel Styles */
.history-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.history-filters {
  display: flex;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #3c3c3c);
}

.history-filter {
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--text-tertiary, #6c7086);
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
}

.history-filter:hover {
  color: var(--text-primary, #f8f8f2);
  background-color: var(--bg-light, #313244);
}

.history-filter.active {
  color: var(--primary, #bd93f9);
  background-color: rgba(189, 147, 249, 0.1);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
}

.history-item:hover {
  background-color: var(--bg-light, #313244);
}

.history-icon {
  font-size: 16px;
}

.history-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-title {
  font-size: 13px;
  color: var(--text-primary, #f8f8f2);
}

.history-time {
  font-size: 11px;
  color: var(--text-tertiary, #6c7086);
}

/* Scrollbar Styling */
.right-panel-content::-webkit-scrollbar {
  width: 8px;
}

.right-panel-content::-webkit-scrollbar-track {
  background: var(--bg-dark, #181825);
}

.right-panel-content::-webkit-scrollbar-thumb {
  background-color: var(--border-color, #3c3c3c);
  border-radius: 4px;
  border: 2px solid var(--bg-dark, #181825);
}

.right-panel-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary, #6c7086);
}

/* Disable transitions during resize */
body.resizing .right-panel,
body.resizing .right-panel-tabs,
body.resizing .panel-tab,
body.resizing .right-panel-content,
body.resizing .right-panel-content > * {
  transition: none !important;
}

/* Chat Container Styles */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; /* No margin needed since we removed padding from parent */
  overflow: hidden;
  flex: 1;
  box-sizing: border-box;
  min-height: 0; /* Important for flex scrolling */
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .right-panel {
    min-width: 438px; /* 250 * 1.75 = 437.5, rounded to 438 */
  }
}

@media (max-width: 768px) {
  .right-panel {
    min-width: 350px; /* 200 * 1.75 = 350 */
  }

  .right-panel-content {
    padding: 12px;
  }

  /* Remove padding for chat container on mobile too */
  .right-panel-content:has(.chat-container) {
    padding: 0;
  }

  .chat-container {
    margin: 0; /* No margin needed since we removed padding */
  }
}
.omni-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  background-color: var(--bg-surface-2, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
  overflow: hidden;
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: relative; /* For drag overlay positioning */
  isolation: isolate; /* Prevent CSS conflicts */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 🧠 Enhanced Response Styles */
.enhanced-response {
  background: linear-gradient(135deg, var(--bg-surface-2, #1e1e2e) 0%, var(--bg-surface-3, #2a2a3a) 100%);
  border-left: 4px solid var(--primary, #ff7b00);
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
}

.enhanced-response-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--primary, #ff7b00);
}

.enhanced-response-content {
  line-height: 1.6;
}

.enhanced-response-content strong {
  color: var(--text-primary, #f8f8f2);
  font-weight: 600;
}

.enhanced-response-metrics {
  font-size: 0.85em;
  color: var(--text-secondary, #a6a6a6);
  font-style: italic;
}

.enhanced-response-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.enhanced-action-button {
  background: var(--bg-surface-1, #181825);
  border: 1px solid var(--border, #3a3a4a);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85em;
  color: var(--text-secondary, #a6a6a6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.enhanced-action-button:hover {
  background: var(--primary, #ff7b00);
  color: var(--text-primary, #f8f8f2);
  border-color: var(--primary, #ff7b00);
}

.enhanced-response-suggestions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #3a3a4a);
}

.enhanced-suggestion {
  display: block;
  color: var(--text-secondary, #a6a6a6);
  font-size: 0.9em;
  margin: 4px 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.enhanced-suggestion:hover {
  color: var(--primary, #ff7b00);
}

.enhanced-suggestion::before {
  content: "💡 ";
  margin-right: 4px;
}

/* Enhanced Response Renderer Styles */
.enhanced-list-item {
  display: flex;
  margin: 8px 0;
  align-items: flex-start;
  gap: 8px;
}

.enhanced-item-number {
  color: var(--primary, #ff7b00);
  font-weight: 600;
  min-width: fit-content;
}

.enhanced-item-content {
  flex: 1;
  line-height: 1.5;
}

.enhanced-content-line {
  margin: 4px 0;
  line-height: 1.5;
}

.enhanced-content-spacer {
  height: 8px;
}

.enhanced-confidence {
  font-size: 0.8em;
  color: var(--text-secondary, #a6a6a6);
  font-weight: normal;
}

.enhanced-response-metadata {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #3a3a4a);
  font-size: 0.85em;
  color: var(--text-secondary, #a6a6a6);
}

.enhanced-metadata-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.enhanced-debug-info {
  margin-top: 12px;
  padding: 8px;
  background: var(--bg-surface-1, #181825);
  border-radius: 4px;
  font-size: 0.8em;
}

.enhanced-debug-content {
  margin-top: 8px;
  color: var(--text-secondary, #a6a6a6);
}

.enhanced-debug-content pre {
  background: var(--bg-surface-2, #1e1e2e);
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.75em;
  margin-top: 8px;
}

/* 🎯 Drag & Drop Styles (ES Tool SDK Style) */
.omni-chat.drag-over {
  background-color: var(--bg-surface-3, #2a2a3a);
  border: 2px dashed var(--primary, #ff7b00);
}

.drag-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(99, 102, 241, 0.1);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}

.drag-drop-message {
  background-color: var(--bg-surface-1, #181825);
  border: 2px dashed var(--primary, #ff7b00);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.drag-drop-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.8;
}

.drag-drop-text strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin-bottom: 8px;
}

.drag-drop-text p {
  font-size: 14px;
  color: var(--text-secondary, #a6a6a6);
  margin: 0;
}

.omni-chat-header {
  padding: 12px 16px;
  background-color: var(--bg-surface-2, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
  font-weight: 600;
  border-bottom: 1px solid var(--border-primary, #3c3c3c);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0; /* Allow text to truncate */
}

.omni-chat-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-name-suffix {
  font-weight: 400;
  opacity: 0.7;
  font-size: 14px;
}





/* Chat action buttons */
.omni-chat-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.omni-header-button {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 12px;
  background-color: var(--bg-surface-3, #313244);
  color: var(--text-primary, #f8f8f2);
  border: 1px solid var(--border-primary, #3c3c3c);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.omni-header-button:hover {
  background-color: var(--bg-surface-4, #45475a);
  border-color: var(--primary, #ff7b00);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.omni-header-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.omni-header-button .icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.omni-header-button .button-text {
  font-size: 13px;
  font-weight: 500;
  color: inherit;
}

.omni-header-button.new-chat-button {
  background-color: var(--primary, #ff7b00);
  color: white;
  border: 1px solid var(--primary, #ff7b00);
}

.omni-header-button.new-chat-button:hover {
  background-color: var(--primary-dark, #cc6200);
  border-color: var(--primary-dark, #cc6200);
}

.omni-header-button.new-chat-button .icon {
  stroke-width: 2;
}

.omni-header-button.new-chat-button .button-text {
  color: white;
}

.omni-header-button.history-button .icon {
  stroke-width: 1.5;
}

.omni-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.95) 0%, rgba(30, 30, 46, 0.95) 100%);
  position: relative;
}

/* Enhanced messages background pattern */
.omni-chat-messages::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: messagesBackgroundShift 10s ease-in-out infinite;
}

@keyframes messagesBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.omni-chat-messages > * {
  position: relative;
  z-index: 1;
}

.omni-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary, #6c7086);
  text-align: center;
  padding: 20px;
}

.omni-chat-empty p {
  margin: 0 0 12px;
  font-size: 15px;
  max-width: 320px;
}

.omni-chat-empty .offline-note {
  font-size: 12px;
  margin-top: 16px;
  padding: 10px;
  color: var(--text-tertiary, #6c7086);
  opacity: 0.8;
  background-color: rgba(248, 113, 113, 0.1);
  border-radius: 8px;
  text-align: center;
}

.omni-chat-empty .suggestion {
  font-size: 14px;
  margin-top: 12px;
  color: var(--primary, #ff7b00);
  font-style: italic;
}

.omni-chat-message {
  max-width: 85%;
  padding: 18px 22px;
  border-radius: 20px;
  position: relative;
  word-break: break-word;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
  animation: enhancedMessageFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

@keyframes enhancedMessageFadeIn {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Enhanced message hover effects */
.omni-chat-message:hover {
  transform: translateY(-2px) scale(1.01);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced message wrapper for full-width responses */
.message-wrapper {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-wrapper.enhanced-response {
  /* Full-width for enhanced responses */
  width: 100%;
  max-width: none;
}

/* Drag & Drop Integration Styling */
.omni-drag-drop {
  margin-bottom: 12px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-message {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--primary, #ff7b00), #4ecdc4);
  color: white;
  border-bottom-right-radius: 8px;
  margin-left: auto;
  position: relative;
  overflow: hidden;
}

/* User message shimmer effect */
.user-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: userMessageShimmer 2s ease-in-out;
}

@keyframes userMessageShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.user-message > * {
  position: relative;
  z-index: 1;
}

.assistant-message {
  align-self: flex-start;
  background:
    linear-gradient(135deg, rgba(49, 50, 68, 0.95) 0%, rgba(42, 42, 58, 0.95) 100%);
  color: var(--text-primary, #f8f8f2);
  border-bottom-left-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* Assistant message background pattern */
.assistant-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: assistantMessageBackgroundShift 6s ease-in-out infinite;
}

@keyframes assistantMessageBackgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.assistant-message > * {
  position: relative;
  z-index: 1;
}

.message-content {
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
}

/* Ensure user messages have white text */
.user-message .message-content {
  color: white;
}

/* Ensure assistant messages have proper text color */
.assistant-message .message-content {
  color: var(--text-primary, #f8f8f2);
}

.message-timestamp {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 6px;
  text-align: right;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
}

.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--text-tertiary, #6c7086);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
  }
  40% {
    transform: scale(1);
  }
}

/* Chat input container */
.omni-chat-input {
  display: flex;
  align-items: flex-end;
  padding: 12px 16px;
  background-color: var(--bg-surface-2, #1e1e2e);
  border-top: 1px solid var(--border-primary, #3c3c3c);
  gap: 12px;
  min-height: 56px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Input wrapper - Override any global styles */
.omni-chat .input-with-attachments {
  flex: 1 !important;
  background-color: var(--bg-surface-3, #313244) !important;
  border: 1px solid var(--border-primary, #3c3c3c) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  transition: border-color 0.2s ease !important;
  min-height: 40px !important;
  max-height: 120px !important;
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

.input-with-attachments:focus-within {
  border-color: var(--primary, #ff7b00);
}

/* Textarea - Override any global styles */
.omni-chat .input-with-attachments textarea {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--text-primary, #f8f8f2) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  resize: none !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  min-height: 20px !important;
  max-height: 100px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  align-self: stretch !important;
  flex: 1 !important;
}

.input-with-attachments textarea::placeholder {
  color: var(--text-tertiary, #6c7086);
}

/* Send button - Override any global styles */
.omni-chat .send-button {
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  border-radius: 8px !important;
  background-color: var(--primary, #ff7b00) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  align-self: flex-end !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  min-height: unset !important;
  min-width: unset !important;
  font-size: 14px !important;
}

.send-button:hover:not(:disabled) {
  background-color: var(--primary-dark, #cc6200);
  transform: translateY(-1px);
}

.send-button:active:not(:disabled) {
  transform: translateY(0);
}

.send-button:disabled {
  background-color: var(--bg-surface-3, #313244);
  color: var(--text-tertiary, #6c7086);
  cursor: not-allowed;
}

/* Attachment styles */
.omni-chat-attachments {
  padding: 10px 16px 0;
  background-color: var(--bg-surface-2, #1e1e2e);
  border-top: 1px solid var(--border-primary, #3c3c3c);
}

/* Model info */
.model-info {
  padding: 6px 16px;
  font-size: 11px;
  color: var(--text-tertiary, #6c7086);
  text-align: right;
  background-color: var(--bg-surface-2, #1e1e2e);
  border-top: 1px solid var(--border-primary, #3c3c3c);
}

/* Loading animation */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: var(--text-primary, #f8f8f2);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Markdown content adjustments for OmniChat */
.assistant-message .markdown-message {
  width: 100%;
}

/* Ensure proper spacing in lists */
.assistant-message .markdown-ul,
.assistant-message .markdown-ol {
  margin-left: 0;
  padding-left: 1.5em;
}

/* Ensure code blocks don't overflow */
.assistant-message .code-block-wrapper {
  max-width: 100%;
  margin: 0.5em 0;
}

.assistant-message .code-block {
  max-width: 100%;
  overflow-x: auto;
}

/* Ensure tables don't overflow */
.assistant-message .table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

/* Ensure images don't overflow */
.assistant-message .markdown-image {
  max-width: 400px; /* Limit maximum width for chat */
  width: 100%;
  height: auto;
  object-fit: contain; /* Maintain aspect ratio */
  border-radius: 8px;
  margin: 12px 0;
}

/* Tool calls and results styling */
.tool-calls,
.tool-results {
  margin-top: 12px;
  padding: 8px;
  border-radius: 6px;
  background-color: var(--bg-surface-1, #181825);
  font-size: 13px;
}

.tool-calls h4,
.tool-results h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text-secondary, #cdd6f4);
}

.tool-call,
.tool-result {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 4px;
  background-color: var(--bg-surface-2, #1e1e2e);
}

.tool-name {
  font-weight: bold;
  margin-bottom: 4px;
  color: var(--primary, #ff7b00);
}

.tool-parameters,
.tool-result-content,
.tool-error {
  margin-top: 4px;
  overflow-x: auto;
}

.tool-parameters pre,
.tool-result-content pre,
.tool-error pre {
  margin: 0;
  padding: 8px;
  background-color: var(--bg-surface-3, #313244);
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

.tool-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 8px;
}

.tool-status.success {
  background-color: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.tool-status.error {
  background-color: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

/* Enhanced mobile responsiveness for AI chat */
@media (max-width: 768px) {
  .omni-chat {
    font-size: 14px;
  }

  .omni-chat-header {
    padding: 12px 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .omni-chat-header h3 {
    font-size: 14px;
  }

  .omni-chat-actions {
    justify-content: flex-end;
  }

  .action-button .button-text {
    display: none;
  }

  .action-button {
    min-width: 32px;
    padding: 0 6px;
  }

  .connection-status {
    font-size: 11px;
    padding: 3px 6px;
  }

  .omni-chat-message {
    max-width: 85%;
    padding: 12px 16px;
    margin: 8px 0;
  }

  .omni-chat-input {
    padding: 10px 12px;
    gap: 10px;
    min-height: 56px;
  }

  .input-with-attachments {
    min-height: 40px;
  }

  .input-with-attachments textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    min-height: 24px;
    max-height: 120px;
    padding: 8px 14px;
  }

  .send-button {
    width: 40px;
    height: 40px;
    touch-action: manipulation;
    border-radius: 8px;
  }



  /* Error message styling for mobile */
  .error-message {
    background: rgba(248, 113, 113, 0.1);
    border-left: 4px solid #f87171;
    padding: 12px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 13px;
  }
}

/* Tablet responsiveness */
@media (min-width: 769px) and (max-width: 1024px) {
  .omni-chat-message {
    max-width: 70%;
  }

  .connection-status {
    font-size: 12px;
  }
}

/* Desktop optimization */
@media (min-width: 1025px) {
  .omni-chat-message {
    max-width: 60%;
  }
}

/* 🚀 SMART OMNI ENHANCEMENTS - Like Augment's UX */

.smart-suggestions {
  margin-top: 24px;
  width: 100%;
  max-width: 480px;
}

.smart-suggestions .suggestion {
  font-size: 14px;
  color: var(--text-secondary, #cdd6f4);
  margin-bottom: 12px;
  text-align: center;
}

/* Project context styling */
.project-context {
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 123, 0, 0.1);
  border: 1px solid rgba(255, 123, 0, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.project-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.project-icon {
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 123, 0, 0.2);
  border-radius: 50%;
  border: 2px solid rgba(255, 123, 0, 0.3);
}

.project-details {
  flex: 1;
}

.project-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #f8f8f2);
  margin: 0 0 4px 0;
}

.project-type {
  font-size: 14px;
  color: var(--primary, #ff7b00);
  margin: 0;
  font-weight: 500;
}

.suggestion-section {
  margin-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Subtle entrance animation */
  animation: titleSlideIn 0.5s ease-out 0.1s both;
}

@keyframes titleSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Subtle icon pulse for the lightbulb */
.section-title .inline-icon {
  animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.suggestion-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.suggestion-btn {
  background: var(--suggestion-bg, rgba(255, 255, 255, 0.05));
  color: var(--suggestion-text, #e0e0e0);
  border: 1px solid var(--suggestion-border, rgba(255, 255, 255, 0.1));
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--suggestion-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
  backdrop-filter: blur(10px);
  position: relative;
  /* Performance optimization */
  will-change: transform, box-shadow;
}

/* Modern hover effects with subtle accent */
.suggestion-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 123, 0, 0.3);
  color: #ffffff;
}

/* Subtle shimmer effect on hover */
.suggestion-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.suggestion-btn:hover::before {
  left: 100%;
}

.suggestion-btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Comedy-specific styling with modern approach */
.comedy-suggestions {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  /* Staggered entrance animation */
  animation: suggestionsSlideIn 0.6s ease-out 0.3s both;
}

@keyframes suggestionsSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comedy-suggestions .suggestion-btn {
  padding: 16px 12px;
  border-radius: 16px;
  background: var(--comedy-suggestion-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--comedy-suggestion-border, rgba(255, 255, 255, 0.08));
  position: relative;
  overflow: hidden;
  flex-direction: column;
  text-align: center;
  gap: 8px;
  min-height: 90px;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--comedy-suggestion-text, #e0e0e0);
}

/* Individual button staggered animations */
.comedy-suggestions .suggestion-btn:nth-child(1) { animation: buttonSlideIn 0.5s ease-out 0.4s both; }
.comedy-suggestions .suggestion-btn:nth-child(2) { animation: buttonSlideIn 0.5s ease-out 0.5s both; }
.comedy-suggestions .suggestion-btn:nth-child(3) { animation: buttonSlideIn 0.5s ease-out 0.6s both; }
.comedy-suggestions .suggestion-btn:nth-child(4) { animation: buttonSlideIn 0.5s ease-out 0.7s both; }
.comedy-suggestions .suggestion-btn:nth-child(5) { animation: buttonSlideIn 0.5s ease-out 0.8s both; }
.comedy-suggestions .suggestion-btn:nth-child(6) { animation: buttonSlideIn 0.5s ease-out 0.9s both; }

@keyframes buttonSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.comedy-suggestions .suggestion-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 123, 0, 0.4);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Removed featured styling - all buttons should look the same */

.comedy-suggestions .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e0e0e0;
  transition: all 0.3s ease;
  font-size: 20px;
}

/* Icon micro-animations on hover */
.comedy-suggestions .suggestion-btn:hover .btn-icon {
  color: #ffffff;
  animation: iconBounce 0.5s ease-in-out;
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-2deg); }
  50% { transform: scale(1.15) rotate(2deg); }
  75% { transform: scale(1.05) rotate(-1deg); }
}

.comedy-suggestions .btn-text {
  font-weight: 600;
  font-size: 13px;
  color: #d0d0d0;
  transition: color 0.3s ease;
}

.comedy-suggestions .suggestion-btn:hover .btn-text {
  color: #ffffff;
}

/* Duplicate styles removed - handled above */

/* Intent indicator in messages */
.intent-indicator {
  background: rgba(255, 123, 0, 0.1);
  border-left: 3px solid var(--primary, #ff7b00);
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--primary, #ff7b00);
  font-style: italic;
}

/* Enhanced message styling */
.omni-chat-message.assistant-message .message-content {
  line-height: 1.6;
}

.omni-chat-message.assistant-message .message-content h3 {
  color: var(--primary, #ff7b00);
  margin-top: 16px;
  margin-bottom: 8px;
}

.omni-chat-message.assistant-message .message-content strong {
  color: var(--text-primary, #f8f8f2);
}

/* Smart status indicators */
.status-indicator .status-dot.checking {
  background: var(--primary, #ff7b00);
  animation: smartPulse 1.5s ease-in-out infinite;
}

@keyframes smartPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Enhanced empty state */
.omni-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.assistant-welcome {
  margin-bottom: 32px;
}

.welcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary, #ff7b00) 0%, var(--primary-light, #ff9533) 100%);
  border-radius: 50%;
  margin: 0 auto 16px;
  color: white;
  box-shadow: 0 8px 24px rgba(255, 123, 0, 0.3);
}

.welcome-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #f8f8f2);
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, var(--text-primary, #f8f8f2) 0%, var(--primary, #ff7b00) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--text-secondary, #cdd6f4);
  margin: 0;
  opacity: 0.8;
}

.offline-note {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 6px;
  padding: 10px;
  margin-top: 15px;
}

.offline-note p {
  color: #facc15;
  margin: 0;
  font-size: 13px;
}

/* Inline icon styling */
.inline-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  color: currentColor;
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .comedy-suggestions,
  .comedy-suggestions .suggestion-btn,
  .suggestion-btn,
  .btn-icon {
    animation: none !important;
    transition: none !important;
  }

  .suggestion-btn:hover,
  .comedy-suggestions .suggestion-btn:hover {
    transform: none !important;
  }

  .comedy-suggestions .suggestion-btn:hover .btn-icon {
    animation: none !important;
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .suggestion-btn,
  .comedy-suggestions .suggestion-btn {
    border-width: 2px;
    border-color: #ffffff;
  }

  .suggestion-btn:hover,
  .comedy-suggestions .suggestion-btn:hover {
    border-color: #ffff00;
    background: rgba(255, 255, 0, 0.1);
  }
}

/* Focus styles for keyboard navigation */
.suggestion-btn:focus-visible,
.comedy-suggestions .suggestion-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Mobile responsiveness for smart suggestions */
@media (max-width: 768px) {
  .suggestion-buttons {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .comedy-suggestions {
    grid-template-columns: 1fr 1fr;
  }

  .suggestion-btn {
    padding: 12px;
    font-size: 12px;
    justify-content: center;
    text-align: center;
  }

  .comedy-suggestions .suggestion-btn {
    min-height: 70px;
    padding: 10px 8px;
  }

  .comedy-suggestions .btn-text {
    font-size: 12px;
  }

  .smart-suggestions {
    max-width: 100%;
  }

  .project-context {
    padding: 16px;
  }

  .project-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .welcome-icon {
    width: 56px;
    height: 56px;
  }

  .welcome-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .suggestion-buttons,
  .comedy-suggestions {
    grid-template-columns: 1fr;
  }

  .comedy-suggestions .suggestion-btn {
    flex-direction: row;
    min-height: auto;
    padding: 12px 16px;
    text-align: left;
  }
}

/* Old message actions removed - using new subtle copy button */

.insert-editor-btn {
  background: var(--primary, #ff7b00);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.insert-editor-btn:hover {
  background: var(--primary-dark, #cc6200);
  transform: translateY(-1px);
}

.insert-editor-btn:active {
  transform: translateY(0);
}

/* ===== PREMIUM GLASSMORPHISM QUICK ACTIONS ===== */

/* Section title with gradient text */
.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary, #ff7b00) 0%, #e56b00 50%, #d45a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Smart suggestions container */
.smart-suggestions {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(20px);
  margin: 16px 0;
  position: relative;
  overflow: hidden;
  animation: smartSuggestionsSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.smart-suggestions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary, #ff7b00), #e56b00, #d45a00);
  opacity: 0.8;
}

/* Comedy suggestions grid */
.comedy-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

/* Premium suggestion buttons */
.suggestion-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 16px 12px;
  backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  min-height: 80px;
  animation: buttonStaggerIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.suggestion-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.suggestion-btn:hover::before {
  left: 100%;
}

.suggestion-btn:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 123, 0, 0.4);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.2),
    0 8px 20px rgba(255, 123, 0, 0.15);
  background: linear-gradient(135deg, rgba(255, 123, 0, 0.12) 0%, rgba(255, 123, 0, 0.08) 100%);
}

.btn-icon {
  color: var(--primary, #ff7b00);
  transition: all 0.3s ease;
}

.suggestion-btn:hover .btn-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 123, 0, 0.5));
}

.btn-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
  transition: color 0.3s ease;
}

/* ===== LIGHT MODE GLASSMORPHISM ===== */
:root[data-theme="light"] .section-title {
  background: linear-gradient(135deg, var(--primary, #ff7b00) 0%, #e56b00 50%, #d45a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-theme="light"] .smart-suggestions {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.8) 100%);
  border: 1px solid rgba(255, 123, 0, 0.15);
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(255, 123, 0, 0.1);
}

:root[data-theme="light"] .smart-suggestions::before {
  background: linear-gradient(90deg, var(--primary, #ff7b00), #e56b00, #d45a00);
  opacity: 1;
}

:root[data-theme="light"] .suggestion-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.8) 100%);
  border: 1px solid rgba(255, 123, 0, 0.15);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .suggestion-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 123, 0, 0.1), transparent);
}

:root[data-theme="light"] .suggestion-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: var(--primary, #ff7b00);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 8px 20px rgba(255, 123, 0, 0.25);
}

:root[data-theme="light"] .btn-icon {
  color: var(--primary, #ff7b00);
}

:root[data-theme="light"] .btn-text {
  color: #1a1a1a;
  font-weight: 600;
}

:root[data-theme="light"] .suggestion-btn:hover .btn-text {
  color: #1a1a1a;
}

/* Staggered animation for buttons */
@keyframes smartSuggestionsSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buttonStaggerIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Add stagger delay to each button */
.comedy-suggestions .suggestion-btn:nth-child(1) { animation-delay: 0.1s; }
.comedy-suggestions .suggestion-btn:nth-child(2) { animation-delay: 0.2s; }
.comedy-suggestions .suggestion-btn:nth-child(3) { animation-delay: 0.3s; }
.comedy-suggestions .suggestion-btn:nth-child(4) { animation-delay: 0.4s; }
.comedy-suggestions .suggestion-btn:nth-child(5) { animation-delay: 0.5s; }
.comedy-suggestions .suggestion-btn:nth-child(6) { animation-delay: 0.6s; }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .comedy-suggestions {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  .suggestion-btn {
    padding: 12px 8px;
    min-height: 70px;
  }

  .btn-text {
    font-size: 12px;
  }

  .smart-suggestions {
    padding: 16px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .comedy-suggestions {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .suggestion-btn {
    padding: 10px 6px;
    min-height: 60px;
    border-radius: 12px;
  }

  .btn-text {
    font-size: 11px;
  }

  .btn-icon {
    width: 16px;
    height: 16px;
  }

  .section-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

/* Light mode inline icons and text */
:root[data-theme="light"] .inline-icon {
  color: var(--primary, #ff7b00);
}

:root[data-theme="light"] .smart-suggestions p {
  color: #1a1a1a;
  font-weight: 500;
}

:root[data-theme="light"] .smart-suggestions strong {
  color: #1a1a1a;
}

  .comedy-suggestions .btn-icon {
    color: #666666;
  }

  .comedy-suggestions .suggestion-btn:hover .btn-icon {
    color: #1a1a1a;
  }

  .section-title {
    color: #1a1a1a;
  }
}

.insert-editor-btn:disabled {
  background: var(--bg-surface-3, #313244);
  cursor: not-allowed;
  transform: none;
}

/* Subtle Copy Button */
.message-actions {
  position: absolute;
  bottom: 8px;
  right: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message:hover .message-actions {
  opacity: 1;
}

.copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-surface-3, #313244);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 6px;
  color: var(--text-tertiary, #a6adc8);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.copy-button:hover {
  background: var(--bg-surface-2, #1e1e2e);
  color: var(--text-secondary, #cdd6f4);
  border-color: var(--border-primary, #45475a);
  transform: translateY(-1px);
}

.copy-button:active {
  transform: translateY(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .message-actions {
    opacity: 1; /* Always visible on mobile */
    bottom: 4px;
    right: 8px;
  }

  .copy-button {
    width: 24px;
    height: 24px;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .omni-chat-message,
  .user-message,
  .assistant-message,
  .user-message-bubble,
  .assistant-message-bubble,
  .typing-indicator {
    animation: none !important;
    transition: none !important;
  }

  .user-message::before,
  .assistant-message::before,
  .user-message-bubble::before,
  .assistant-message-bubble::before,
  .omni-chat-messages::before {
    animation: none !important;
  }

  .omni-chat-message:hover,
  .user-message:hover,
  .assistant-message:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .omni-chat-message,
  .user-message,
  .assistant-message {
    border-width: 2px;
  }

  .user-message {
    border-color: #ffffff;
    background: #0078d4;
  }

  .assistant-message {
    border-color: #ffffff;
    background: #333333;
  }
}

/* Focus styles for keyboard navigation */
.omni-chat-message:focus-visible,
.copy-button:focus-visible,
.insert-editor-btn:focus-visible {
  outline: 2px solid #4ecdc4;
  outline-offset: 2px;
}

/* Enhanced light theme adjustments */
[data-theme="light"] .omni-chat-messages {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
}

[data-theme="light"] .omni-chat-messages::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.03) 0%, transparent 50%);
}

[data-theme="light"] .assistant-message {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .assistant-message::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.05) 0%, transparent 50%);
}

/* ===== INPUT DROPPED ITEMS CHIPS ===== */

.input-dropped-items {
  padding: 8px 12px 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.dropped-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dropped-items-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  display: flex;
  align-items: center;
  gap: 4px;
}

.clear-all-items-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  font-size: 0.7rem;
  padding: 2px 6px;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.clear-all-items-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  transform: scale(1.05);
}

.dropped-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.input-item-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary, #ffffff);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  position: relative;
  overflow: hidden;
  max-width: 160px;
  animation: chipSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-item-chip:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.chip-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.chip-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chip-remove-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 3px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  font-size: 0.7rem;
  padding: 1px 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  opacity: 0.7;
  line-height: 1;
}

.chip-remove-btn:hover {
  background: rgba(255, 0, 0, 0.2);
  color: #ff6b6b;
  opacity: 1;
  transform: scale(1.1);
}

/* Adjust input container when chips are present */
.input-with-attachments:has(.input-dropped-items) {
  flex-direction: column;
  align-items: stretch;
}

.input-with-attachments:has(.input-dropped-items) textarea {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Light theme adjustments for input chips */
[data-theme="light"] .input-dropped-items {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .input-item-chip {
  color: var(--text-primary, #1e1e2e);
}

[data-theme="light"] .chip-remove-btn {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-tertiary, rgba(0, 0, 0, 0.5));
}

[data-theme="light"] .chip-remove-btn:hover {
  background: rgba(255, 0, 0, 0.1);
  color: #dc3545;
}

[data-theme="light"] .dropped-items-count {
  color: var(--text-secondary, rgba(0, 0, 0, 0.7));
}

[data-theme="light"] .clear-all-items-btn {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-tertiary, rgba(0, 0, 0, 0.5));
}

[data-theme="light"] .clear-all-items-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--text-secondary, rgba(0, 0, 0, 0.7));
}

/* Responsive design for input chips */
@media (max-width: 768px) {
  .input-dropped-items {
    padding: 6px 10px 3px 10px;
    gap: 4px;
  }

  .input-item-chip {
    max-width: 120px;
    padding: 3px 6px;
    font-size: 0.75rem;
  }

  .chip-icon {
    font-size: 0.8rem;
  }
}

/* ===== DROPPED ITEMS DISPLAY STYLES ===== */

.dropped-items-container {
  margin: 0 16px 12px 16px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropped-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dropped-items-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  display: flex;
  align-items: center;
  gap: 6px;
}

.clear-all-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  font-size: 0.75rem;
  padding: 4px 8px;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.clear-all-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  transform: scale(1.05);
}

.dropped-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dropped-item-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #ffffff);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  position: relative;
  overflow: hidden;
  max-width: 200px;
  animation: chipSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes chipSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dropped-item-chip:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.item-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.remove-item-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  opacity: 0.7;
}

.remove-item-btn:hover {
  background: rgba(255, 0, 0, 0.2);
  color: #ff6b6b;
  opacity: 1;
  transform: scale(1.1);
}

/* Light theme adjustments for dropped items */
[data-theme="light"] .dropped-items-container {
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0.01) 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .dropped-items-title {
  color: var(--text-secondary, rgba(0, 0, 0, 0.7));
}

[data-theme="light"] .clear-all-btn {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-tertiary, rgba(0, 0, 0, 0.5));
}

[data-theme="light"] .clear-all-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--text-secondary, rgba(0, 0, 0, 0.7));
}

[data-theme="light"] .dropped-item-chip {
  color: var(--text-primary, #1e1e2e);
}

[data-theme="light"] .remove-item-btn {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-tertiary, rgba(0, 0, 0, 0.5));
}

[data-theme="light"] .remove-item-btn:hover {
  background: rgba(255, 0, 0, 0.1);
  color: #dc3545;
}

/* Responsive design for dropped items */
@media (max-width: 768px) {
  .dropped-items-container {
    margin: 0 12px 8px 12px;
    padding: 8px;
  }

  .dropped-item-chip {
    max-width: 150px;
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .dropped-items-list {
    gap: 6px;
  }
}

/* Accessibility for dropped items */
@media (prefers-reduced-motion: reduce) {
  .dropped-items-container,
  .dropped-item-chip {
    animation: none !important;
  }

  .dropped-item-chip:hover,
  .clear-all-btn:hover,
  .remove-item-btn:hover {
    transform: none !important;
  }
}

/* High contrast mode for dropped items */
@media (prefers-contrast: high) {
  .dropped-items-container {
    border-width: 2px;
  }

  .dropped-item-chip {
    border-width: 2px;
  }

  .clear-all-btn,
  .remove-item-btn {
    border-width: 2px;
  }
}
.enhanced-response-container {
  width: 100%;
  max-width: none;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
}

.enhanced-action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.enhanced-action-button {
  background: var(--primary, #007acc);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.enhanced-action-button:hover {
  background: var(--primary-dark, #005a9e);
  transform: translateY(-1px);
}

.enhanced-action-button.secondary {
  background: var(--bg-surface-3, #2d2d2d);
  color: var(--text-primary, #f8f8f2);
  border: 1px solid var(--border-primary, #444444);
}

.enhanced-action-button.secondary:hover {
  background: var(--bg-surface-4, #3d3d3d);
  border-color: var(--primary, #007acc);
}

/* Inline icon styling for enhanced buttons */
.enhanced-action-button .inline-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  color: currentColor;
}
/* BlockReference.css - Modern, spacious block reference containers */

.block-reference {
  position: relative;
  background: var(--bg-surface-2, #1e1e2e);
  border: 1px solid var(--border-primary, #45475a);
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.block-reference:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 0 0 1px var(--primary-alpha, rgba(137, 180, 250, 0.2));
  border-color: var(--primary, #89b4fa);
}

.block-reference:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--primary, #89b4fa),
    0 4px 12px rgba(0, 0, 0, 0.1);
}

.block-reference:active {
  transform: translateY(-1px);
}

/* Header */
.block-reference__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.block-reference__type {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg-surface-3, #313244);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #cdd6f4);
}

.block-reference__icon {
  font-size: 14px;
  line-height: 1;
}

.block-reference__type-label {
  text-transform: capitalize;
  letter-spacing: 0.025em;
}

.block-reference__actions {
  display: flex;
  gap: 6px;
  opacity: 1; /* Always visible now */
  transition: all 0.2s ease;
  flex-wrap: wrap;
}

.block-reference:hover .block-reference__actions {
  gap: 8px; /* Slightly more space on hover */
}

.block-reference__expand-btn {
  order: 1; /* Always first */
}

.block-reference__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-surface-3, #313244);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 6px;
  color: var(--text-secondary, #cdd6f4);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.block-reference__action-btn:hover {
  background: var(--primary, #89b4fa);
  color: var(--bg-primary, #1e1e2e);
  border-color: var(--primary, #89b4fa);
  transform: scale(1.05);
}

/* Audio player button */
.block-reference__audio-btn {
  order: 2; /* After expand button */
  background: var(--bg-surface-3, #313244);
  border-color: var(--border-secondary, #585b70);
}

.block-reference__audio-btn:hover {
  background: var(--green, #a6e3a1);
  color: var(--bg-primary, #1e1e2e);
  border-color: var(--green, #a6e3a1);
}

.block-reference__audio-btn.playing {
  background: var(--green, #a6e3a1);
  color: var(--bg-primary, #1e1e2e);
  border-color: var(--green, #a6e3a1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.block-reference__create-btn:hover {
  background: var(--success, #a6e3a1);
  color: var(--bg-primary, #1e1e2e);
  border-color: var(--success, #a6e3a1);
}

/* Content */
.block-reference__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.block-reference__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-reference__preview {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #cdd6f4);
  margin: 0;
  transition: all 0.3s ease;
}

.block-reference__truncated-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-reference__preview--expanded {
  max-height: none;
}

.block-reference__full-content {
  display: block;
  max-height: none;
  overflow: visible;
}

.block-reference__content-text {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary, #cdd6f4);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  padding: 12px 16px;
  background: var(--bg-surface-1, #181825);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 8px;
  max-width: 100%;
  overflow-x: auto;
}

.block-reference__expand-hint {
  display: none; /* Hide since chevron is always visible now */
}

.block-reference--expanded-state {
  min-height: auto;
}

.block-reference--expanded-state .block-reference__preview {
  display: block;
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
  overflow: visible;
}

/* Footer */
.block-reference__footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-secondary, #585b70);
}

.block-reference__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.block-reference__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-tertiary, #a6adc8);
  font-weight: 500;
}

.block-reference__meta-item svg {
  opacity: 0.7;
}

/* Hover indicator - DISABLED to prevent blocking buttons */
.block-reference__hover-indicator {
  display: none; /* Completely hidden to prevent blocking */
}

/* Variants */
.block-reference--compact {
  padding: 16px;
  min-height: 80px;
  margin: 12px 0;
}

.block-reference--compact .block-reference__title {
  font-size: 14px;
}

.block-reference--compact .block-reference__preview {
  font-size: 13px;
  -webkit-line-clamp: 2;
}

.block-reference--expanded {
  padding: 24px;
  min-height: 160px;
  margin: 20px 0;
}

.block-reference--expanded .block-reference__title {
  font-size: 18px;
}

.block-reference--expanded .block-reference__preview {
  font-size: 15px;
  -webkit-line-clamp: 4;
}

/* Responsive design */
@media (max-width: 768px) {
  .block-reference {
    padding: 16px;
    margin: 12px 0;
  }
  
  .block-reference__title {
    font-size: 15px;
  }
  
  .block-reference__preview {
    font-size: 13px;
  }
  
  .block-reference__hover-indicator {
    display: none;
  }
  
  .block-reference__actions {
    opacity: 1;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .block-reference {
    background: var(--bg-surface-2, #1e1e2e);
    border-color: var(--border-primary, #45475a);
  }
  
  .block-reference:hover {
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 0 1px var(--primary-alpha, rgba(137, 180, 250, 0.3));
  }
}

/* Light mode */
@media (prefers-color-scheme: light) {
  .block-reference {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #1f2937;
  }
  
  .block-reference__title {
    color: #1f2937;
  }
  
  .block-reference__preview {
    color: #6b7280;
  }
  
  .block-reference__type {
    background: #f3f4f6;
    color: #6b7280;
  }
  
  .block-reference:hover {
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
  }
}
/* Enhanced Creation Confirmation Modal - Modern 2025 UX */

.creation-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal, 1000);
  animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Performance optimization */
  will-change: opacity, backdrop-filter;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.creation-modal {
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.95) 0%, rgba(35, 39, 47, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  width: 90%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: modalSpringIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backdrop-filter: blur(20px);
  position: relative;
  /* Performance optimization */
  will-change: transform, opacity;
}

/* Spring physics animation */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Animated background pattern */
.creation-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.creation-modal > * {
  position: relative;
  z-index: 1;
}

/* Legacy animation removed - replaced with modalSpringIn */

/* Enhanced Header */
.creation-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 32px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px);
  position: relative;
  /* Staggered entrance animation */
  animation: headerSlideIn 0.5s ease-out 0.2s both;
}

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

/* Header shimmer effect */
.creation-modal__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: headerShimmer 3s ease-in-out infinite;
}

@keyframes headerShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.creation-modal__title-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.creation-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--bg-surface-3, #313244);
  border-radius: 12px;
  flex-shrink: 0;
}

.creation-modal__title {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  line-height: 1.3;
}

.creation-modal__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #cdd6f4);
  line-height: 1.4;
}

.creation-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 8px;
  color: var(--text-secondary, #cdd6f4);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.creation-modal__close:hover {
  background: var(--bg-surface-3, #313244);
  border-color: var(--border-primary, #45475a);
}

/* Content */
.creation-modal__content {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.creation-modal__section {
  margin-bottom: 24px;
}

.creation-modal__section:last-child {
  margin-bottom: 0;
}

.creation-modal__section-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
}

/* Block List */
.creation-modal__block-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-surface-2, #1e1e2e);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 8px;
}

.creation-modal__block-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-surface-3, #313244);
  border-radius: 6px;
  font-size: 13px;
}

.creation-modal__block-type {
  padding: 2px 6px;
  background: var(--primary-alpha, rgba(137, 180, 250, 0.2));
  color: var(--primary, #89b4fa);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  flex-shrink: 0;
}

.creation-modal__block-name {
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
  flex-shrink: 0;
  min-width: 80px;
}

.creation-modal__block-preview {
  color: var(--text-tertiary, #a6adc8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Form */
.creation-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.creation-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.creation-modal__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
}

.creation-modal__input,
.creation-modal__textarea {
  padding: 12px 16px;
  background: var(--bg-surface-2, #1e1e2e);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 8px;
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
  transition: all 0.2s ease;
  resize: vertical;
}

.creation-modal__input:focus,
.creation-modal__textarea:focus {
  outline: none;
  border-color: var(--primary, #89b4fa);
  box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.1);
}

.creation-modal__textarea {
  min-height: 80px;
  font-family: inherit;
}

.creation-modal__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creation-modal__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.creation-modal__checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #89b4fa);
}

.creation-modal__checkbox-label {
  font-size: 14px;
  color: var(--text-secondary, #cdd6f4);
  line-height: 1.4;
}

/* Footer */
.creation-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--border-secondary, #585b70);
  background: var(--bg-surface-2, #1e1e2e);
}

.creation-modal__info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary, #a6adc8);
}

.creation-modal__info svg {
  color: var(--warning, #f9e2af);
}

.creation-modal__actions {
  display: flex;
  gap: 12px;
}

.creation-modal__button {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.creation-modal__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.creation-modal__button--secondary {
  background: transparent;
  color: var(--text-secondary, #cdd6f4);
  border-color: var(--border-secondary, #585b70);
}

.creation-modal__button--secondary:hover:not(:disabled) {
  background: var(--bg-surface-3, #313244);
  border-color: var(--border-primary, #45475a);
}

.creation-modal__button--primary {
  background: var(--primary, #89b4fa);
  color: var(--bg-primary, #1e1e2e);
  border-color: var(--primary, #89b4fa);
}

.creation-modal__button--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(137, 180, 250, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .creation-modal {
    width: 95%;
    max-height: 95vh;
  }
  
  .creation-modal__header {
    padding: 20px 20px 16px;
  }
  
  .creation-modal__content {
    padding: 20px;
  }
  
  .creation-modal__footer {
    padding: 16px 20px 20px;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .creation-modal__actions {
    justify-content: stretch;
  }
  
  .creation-modal__button {
    flex: 1;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .creation-modal-overlay,
  .creation-modal,
  .creation-modal__header,
  .creation-modal__button {
    animation: none !important;
    transition: none !important;
  }

  .creation-modal::before,
  .creation-modal__header::before {
    animation: none !important;
  }

  .creation-modal__button--primary:hover:not(:disabled) {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .creation-modal {
    border-width: 2px;
    border-color: #ffffff;
  }

  .creation-modal__button {
    border-width: 2px;
  }
}

/* Focus styles for keyboard navigation */
.creation-modal__button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Light theme adjustments */
[data-theme="light"] .creation-modal {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .creation-modal::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%);
}

[data-theme="light"] .creation-modal__header {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
/* EnhancedActionBar.css - Advanced action bar for AI responses */

.enhanced-action-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-surface-2, #1e1e2e);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.enhanced-action-bar__primary {
  display: flex;
  gap: 8px;
  align-items: center;
}

.enhanced-action-bar__divider {
  width: 1px;
  height: 24px;
  background: var(--border-secondary, #585b70);
  flex-shrink: 0;
}

.enhanced-action-bar__creation {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.enhanced-action-bar__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #cdd6f4);
  white-space: nowrap;
}

.enhanced-action-bar__label svg {
  color: var(--primary, #89b4fa);
}

.enhanced-action-bar__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Action Buttons */
.enhanced-action-bar__action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 8px;
  color: var(--text-secondary, #cdd6f4);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.enhanced-action-bar__action:hover {
  background: var(--bg-surface-3, #313244);
  border-color: var(--border-primary, #45475a);
  color: var(--text-primary, #f8f8f2);
  transform: translateY(-1px);
}

.enhanced-action-bar__action--copy:hover {
  border-color: var(--primary, #89b4fa);
  color: var(--primary, #89b4fa);
}

.enhanced-action-bar__action--share:hover {
  border-color: var(--success, #a6e3a1);
  color: var(--success, #a6e3a1);
}

/* Create Buttons */
.enhanced-action-bar__create-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-surface-3, #313244);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 8px;
  color: var(--text-primary, #f8f8f2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.enhanced-action-bar__create-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--action-color, var(--primary, #89b4fa));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.enhanced-action-bar__create-btn:hover::before {
  opacity: 0.1;
}

.enhanced-action-bar__create-btn:hover {
  border-color: var(--action-color, var(--primary, #89b4fa));
  color: var(--action-color, var(--primary, #89b4fa));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.enhanced-action-bar__create-btn svg {
  position: relative;
  z-index: 1;
}

.enhanced-action-bar__create-btn span {
  position: relative;
  z-index: 1;
}

.enhanced-action-bar__create-btn--custom {
  border-style: dashed;
  --action-color: var(--text-tertiary, #a6adc8);
}

.enhanced-action-bar__create-btn--custom:hover {
  border-style: solid;
  --action-color: var(--primary, #89b4fa);
}

/* Active/Loading States */
.enhanced-action-bar__action--active,
.enhanced-action-bar__create-btn--active {
  background: var(--primary, #89b4fa);
  color: var(--bg-primary, #1e1e2e);
  border-color: var(--primary, #89b4fa);
}

.enhanced-action-bar__action--loading,
.enhanced-action-bar__create-btn--loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .enhanced-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }
  
  .enhanced-action-bar__primary {
    justify-content: center;
  }
  
  .enhanced-action-bar__divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
  
  .enhanced-action-bar__creation {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .enhanced-action-bar__label {
    justify-content: center;
  }
  
  .enhanced-action-bar__actions {
    justify-content: center;
  }
  
  .enhanced-action-bar__action,
  .enhanced-action-bar__create-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .enhanced-action-bar__actions {
    flex-direction: column;
    width: 100%;
  }
  
  .enhanced-action-bar__create-btn {
    width: 100%;
  }
}

/* Animation for new actions */
@keyframes slideInAction {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.enhanced-action-bar__create-btn {
  animation: slideInAction 0.3s ease-out;
}

.enhanced-action-bar__create-btn:nth-child(2) {
  animation-delay: 0.1s;
}

.enhanced-action-bar__create-btn:nth-child(3) {
  animation-delay: 0.2s;
}

.enhanced-action-bar__create-btn:nth-child(4) {
  animation-delay: 0.3s;
}

/* Light mode */
@media (prefers-color-scheme: light) {
  .enhanced-action-bar {
    background: #ffffff;
    border-color: #e5e7eb;
  }
  
  .enhanced-action-bar__divider {
    background: #e5e7eb;
  }
  
  .enhanced-action-bar__label {
    color: #6b7280;
  }
  
  .enhanced-action-bar__action {
    color: #6b7280;
    border-color: #d1d5db;
  }
  
  .enhanced-action-bar__action:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #1f2937;
  }
  
  .enhanced-action-bar__create-btn {
    background: #f9fafb;
    color: #1f2937;
    border-color: #d1d5db;
  }
  
  .enhanced-action-bar__create-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}
/* BlockReferenceContainer.css - Container for multiple block references */

.block-reference-container {
  margin: 24px 0;
  background: var(--bg-surface-1, #181825);
  border: 1px solid var(--border-primary, #45475a);
  border-radius: 16px;
  overflow: hidden;
}

/* Header */
.block-reference-container__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-secondary, #585b70);
  background: var(--bg-surface-2, #1e1e2e);
}

.block-reference-container__title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary, #f8f8f2);
}

.block-reference-container__title svg {
  color: var(--primary, #89b4fa);
}

.block-reference-container__title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.block-reference-container__count {
  padding: 4px 8px;
  background: var(--bg-surface-3, #313244);
  color: var(--text-secondary, #cdd6f4);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.block-reference-container__expand-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 8px;
  color: var(--text-secondary, #cdd6f4);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.block-reference-container__expand-btn:hover {
  background: var(--primary, #89b4fa);
  color: var(--bg-primary, #1e1e2e);
  border-color: var(--primary, #89b4fa);
  transform: translateY(-1px);
}

/* Content */
.block-reference-container__content {
  padding: 8px 24px 24px;
}

/* Grid variant */
.block-reference-container--grid .block-reference-container__content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px 24px 24px;
}

.block-reference-container--grid .block-reference {
  margin: 0;
}

/* Compact variant */
.block-reference-container--compact {
  margin: 16px 0;
  border-radius: 12px;
}

.block-reference-container--compact .block-reference-container__header {
  padding: 16px 20px 12px;
}

.block-reference-container--compact .block-reference-container__title h3 {
  font-size: 14px;
}

.block-reference-container--compact .block-reference-container__content {
  padding: 4px 20px 20px;
}

/* Footer */
.block-reference-container__footer {
  padding: 0 24px 20px;
  display: flex;
  justify-content: center;
}

.block-reference-container__collapse-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 8px;
  color: var(--text-secondary, #cdd6f4);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.block-reference-container__collapse-btn:hover {
  background: var(--bg-surface-3, #313244);
  border-color: var(--border-primary, #45475a);
}

/* Empty state */
.block-reference-container--empty {
  display: none;
}

/* Action Bar */
.block-reference-container__action-bar {
  padding: 0 24px 24px;
  border-top: 1px solid var(--border-secondary, #585b70);
  margin-top: 8px;
  padding-top: 20px;
}

/* Responsive design */
@media (max-width: 768px) {
  .block-reference-container {
    margin: 16px 0;
    border-radius: 12px;
  }
  
  .block-reference-container__header {
    padding: 16px 20px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .block-reference-container__title {
    gap: 8px;
  }
  
  .block-reference-container__title h3 {
    font-size: 15px;
  }
  
  .block-reference-container__content {
    padding: 4px 20px 20px;
  }
  
  .block-reference-container--grid .block-reference-container__content {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 8px 20px 20px;
  }
  
  .block-reference-container__expand-btn {
    align-self: stretch;
    justify-content: center;
  }
}

/* Animation for expanding/collapsing */
.block-reference-container__content {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode */
@media (prefers-color-scheme: light) {
  .block-reference-container {
    background: #ffffff;
    border-color: #e5e7eb;
  }
  
  .block-reference-container__header {
    background: #f9fafb;
    border-color: #e5e7eb;
  }
  
  .block-reference-container__title {
    color: #1f2937;
  }
  
  .block-reference-container__count {
    background: #f3f4f6;
    color: #6b7280;
  }
  
  .block-reference-container__expand-btn,
  .block-reference-container__collapse-btn {
    border-color: #d1d5db;
    color: #6b7280;
  }
  
  .block-reference-container__expand-btn:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
  }
  
  .block-reference-container__collapse-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
  }
}
/* WorkflowReference Component Styles */

.workflow-reference {
  background: var(--bg-surface-2, #1e1e2e);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.workflow-reference:hover {
  border-color: var(--accent-primary, #6366f1);
  background: var(--bg-surface-3, #313244);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.workflow-reference:active {
  transform: translateY(0);
}

/* Header */
.workflow-reference__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.workflow-reference__type {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary, #a6adc8);
  font-size: 12px;
  font-weight: 500;
}

.workflow-reference__icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-reference__type-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.workflow-reference__node-count {
  background: var(--accent-primary, #6366f1);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.workflow-reference__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.workflow-reference:hover .workflow-reference__actions {
  opacity: 1;
}

.workflow-reference__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-surface-1, #181825);
  border: 1px solid var(--border-secondary, #585b70);
  border-radius: 6px;
  color: var(--text-tertiary, #a6adc8);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.workflow-reference__action-btn:hover {
  background: var(--bg-surface-3, #313244);
  color: var(--text-secondary, #cdd6f4);
  border-color: var(--border-primary, #45475a);
  transform: translateY(-1px);
}

.workflow-reference__action-btn:active {
  transform: translateY(0);
}

.workflow-reference__execute-btn {
  background: var(--accent-primary, #6366f1);
  color: white;
  border-color: var(--accent-primary, #6366f1);
}

.workflow-reference__execute-btn:hover {
  background: var(--accent-secondary, #4f46e5);
  border-color: var(--accent-secondary, #4f46e5);
}

.workflow-reference__execute-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Content */
.workflow-reference__content {
  margin-bottom: 12px;
}

.workflow-reference__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.workflow-reference__preview {
  color: var(--text-secondary, #cdd6f4);
  font-size: 14px;
  line-height: 1.5;
}

.workflow-reference__truncated-description {
  opacity: 0.8;
}

.workflow-reference__full-description {
  opacity: 0.9;
}

/* Footer */
.workflow-reference__footer {
  border-top: 1px solid var(--border-tertiary, #45475a);
  padding-top: 12px;
  margin-top: 12px;
}

.workflow-reference__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.workflow-reference__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-tertiary, #a6adc8);
  font-size: 11px;
  font-weight: 500;
}

.workflow-reference__meta-item svg {
  opacity: 0.7;
}

/* Variants */
.workflow-reference--compact {
  padding: 12px;
  margin: 8px 0;
}

.workflow-reference--compact .workflow-reference__title {
  font-size: 14px;
  margin-bottom: 4px;
}

.workflow-reference--compact .workflow-reference__preview {
  font-size: 12px;
}

.workflow-reference--expanded {
  padding: 20px;
}

.workflow-reference--expanded .workflow-reference__title {
  font-size: 18px;
}

/* Animations */
@keyframes spinning {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinning {
  animation: spinning 1s linear infinite;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .workflow-reference {
    padding: 12px;
    margin: 8px 0;
  }
  
  .workflow-reference__actions {
    opacity: 1; /* Always visible on mobile */
  }
  
  .workflow-reference__action-btn {
    width: 32px;
    height: 32px;
  }
  
  .workflow-reference__title {
    font-size: 14px;
  }
  
  .workflow-reference__preview {
    font-size: 13px;
  }
  
  .workflow-reference__metadata {
    gap: 8px;
  }
  
  .workflow-reference__meta-item {
    font-size: 10px;
  }
}

/* Focus states for accessibility */
.workflow-reference:focus {
  outline: 2px solid var(--accent-primary, #6366f1);
  outline-offset: 2px;
}

.workflow-reference__action-btn:focus {
  outline: 2px solid var(--accent-primary, #6366f1);
  outline-offset: 1px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .workflow-reference {
    border-width: 2px;
  }
  
  .workflow-reference__action-btn {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .workflow-reference,
  .workflow-reference__action-btn {
    transition: none;
  }
  
  .spinning {
    animation: none;
  }
}
/* MarkdownMessage.css - Styling for markdown content in chat messages */

.markdown-message {
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Headings */
.markdown-h1,
.markdown-h2,
.markdown-h3,
.markdown-h4,
.markdown-h5,
.markdown-h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary, #f8f8f2);
}

.markdown-h1 {
  font-size: 1.5em;
  border-bottom: 1px solid var(--border-primary, #45475a);
  padding-bottom: 0.3em;
}

.markdown-h2 {
  font-size: 1.3em;
  border-bottom: 1px solid var(--border-primary, #45475a);
  padding-bottom: 0.3em;
}

.markdown-h3 {
  font-size: 1.2em;
}

.markdown-h4 {
  font-size: 1.1em;
}

.markdown-h5, .markdown-h6 {
  font-size: 1em;
}

/* Paragraphs */
.markdown-message p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* Lists */
.markdown-ul, .markdown-ol {
  margin-top: 0;
  margin-bottom: 1em;
  padding-left: 2em;
}

.markdown-li {
  margin-bottom: 0.25em;
}

.markdown-li > p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Blockquotes */
.markdown-blockquote {
  margin: 0.5em 0;
  padding: 0 1em;
  color: var(--text-secondary, #a6adc8);
  border-left: 0.25em solid var(--border-primary, #45475a);
}

.markdown-blockquote > :first-child {
  margin-top: 0;
}

.markdown-blockquote > :last-child {
  margin-bottom: 0;
}

/* Code */
.inline-code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: var(--bg-surface-3, #313244);
  border-radius: 3px;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  color: var(--text-primary, #f8f8f2);
}

.code-block-wrapper {
  margin: 1em 0;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--bg-surface-3, #313244);
  border: 1px solid var(--border-primary, #45475a);
}

.code-block-language {
  padding: 0.5em 1em;
  font-size: 0.75em;
  color: var(--text-tertiary, #6c7086);
  background-color: var(--bg-surface-2, #1e1e2e);
  border-bottom: 1px solid var(--border-primary, #45475a);
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.code-block {
  margin: 0;
  padding: 1em;
  overflow-x: auto;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.85em;
  line-height: 1.45;
  background-color: var(--bg-surface-3, #313244);
  color: var(--text-primary, #f8f8f2);
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
  margin: 1em 0;
}

.markdown-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-primary, #45475a);
}

.markdown-table th,
.markdown-table td {
  padding: 0.5em 1em;
  border: 1px solid var(--border-primary, #45475a);
  text-align: left;
}

.markdown-table th {
  background-color: var(--bg-surface-2, #1e1e2e);
  font-weight: 600;
}

.markdown-table tr:nth-child(2n) {
  background-color: var(--bg-surface-2, #1e1e2e);
}

/* Links */
.markdown-link {
  color: var(--primary, #0078d4);
  text-decoration: none;
}

.markdown-link:hover {
  text-decoration: underline;
}

/* Images */
.markdown-image {
  max-width: 400px; /* Limit maximum width for chat */
  width: 100%;
  height: auto;
  margin: 1em 0;
  border-radius: 6px;
  object-fit: contain; /* Maintain aspect ratio */
}

/* Light theme overrides */
:root[data-theme="light"] .markdown-h1,
:root[data-theme="light"] .markdown-h2,
:root[data-theme="light"] .markdown-h3,
:root[data-theme="light"] .markdown-h4,
:root[data-theme="light"] .markdown-h5,
:root[data-theme="light"] .markdown-h6 {
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] .markdown-blockquote {
  color: var(--text-secondary-light, #666666);
  border-left-color: var(--border-primary-light, #dddddd);
}

:root[data-theme="light"] .inline-code {
  background-color: var(--bg-surface-3-light, #f0f0f0);
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] .code-block-wrapper {
  background-color: var(--bg-surface-3-light, #f5f5f5);
  border-color: var(--border-primary-light, #dddddd);
}

:root[data-theme="light"] .code-block-language {
  background-color: var(--bg-surface-2-light, #eeeeee);
  border-bottom-color: var(--border-primary-light, #dddddd);
  color: var(--text-tertiary-light, #666666);
}

:root[data-theme="light"] .code-block {
  background-color: var(--bg-surface-3-light, #f5f5f5);
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] .markdown-table th {
  background-color: var(--bg-surface-2-light, #eeeeee);
}

:root[data-theme="light"] .markdown-table tr:nth-child(2n) {
  background-color: var(--bg-surface-2-light, #f5f5f5);
}

:root[data-theme="light"] .markdown-table th,
:root[data-theme="light"] .markdown-table td {
  border-color: var(--border-primary-light, #dddddd);
}
.conversation-history {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(245, 245, 245, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  width: 100%;
  overflow: hidden;
  flex: 1;
  position: relative;
  /* Entrance animation */
  animation: historySlideIn 0.5s ease-out;
}

@keyframes historySlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animated background pattern */
.conversation-history::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.conversation-history > * {
  position: relative;
  z-index: 1;
}

.conversation-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  backdrop-filter: blur(10px);
  position: relative;
  /* Staggered entrance animation */
  animation: headerSlideIn 0.5s ease-out 0.2s both;
}

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

/* Header shimmer effect */
.conversation-history-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
  animation: headerShimmer 3s ease-in-out infinite;
}

@keyframes headerShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.conversation-history-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #1e293b, #64748b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.1); }
}

.new-chat-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--primary, #0078d4), #4ecdc4);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 120, 212, 0.3);
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: buttonSlideIn 0.4s ease-out 0.3s both;
}

@keyframes buttonSlideIn {
  from {
    opacity: 0;
    transform: translateX(15px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.new-chat-button:hover {
  background: linear-gradient(135deg, #106ebe, #5ae4d4);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 120, 212, 0.4);
}

.new-chat-button:active {
  transform: translateY(0) scale(0.98);
}

/* Button shimmer effect */
.new-chat-button::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;
}

.new-chat-button:hover::before {
  left: 100%;
}

.new-chat-button span {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

.back-arrow-button {
  background-color: #4a6cf7;
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.back-arrow-button:hover {
  background-color: #3a5ce5;
}

.back-arrow-button span {
  font-size: 18px;
  font-weight: bold;
}

.conversation-history-error {
  padding: 12px;
  margin: 8px;
  background-color: #ffebee;
  color: #c62828;
  border-radius: 4px;
  font-size: 14px;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.conversation-item {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  overflow: hidden;
  /* Staggered animation */
  animation: itemSlideIn 0.5s ease-out both;
}

.conversation-item:nth-child(1) { animation-delay: 0.1s; }
.conversation-item:nth-child(2) { animation-delay: 0.2s; }
.conversation-item:nth-child(3) { animation-delay: 0.3s; }
.conversation-item:nth-child(4) { animation-delay: 0.4s; }
.conversation-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes itemSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.conversation-item:hover {
  background: rgba(240, 244, 255, 0.95);
  border-color: rgba(208, 217, 255, 0.8);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px) scale(1.01);
}

.conversation-item.active {
  background-color: #e8f0fe;
  border-color: #4a6cf7;
  box-shadow: 0 2px 5px rgba(74, 108, 247, 0.2);
}

.conversation-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 24px; /* Space for delete button */
}

.conversation-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.conversation-date {
  white-space: nowrap;
}

.conversation-message-count {
  color: #888;
}

.conversation-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.open-conversation-button {
  background-color: #4a6cf7;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.open-conversation-button:hover {
  background-color: #3a5ce5;
}

.delete-conversation-button {
  background: none;
  border: none;
  color: #999;
  font-size: 16px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
}

.delete-conversation-button:hover {
  background-color: #f0f0f0;
  color: #d32f2f;
}

.no-conversations {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  color: #666;
}

.no-conversations p {
  margin-bottom: 16px;
}

.no-conversations button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background-color: var(--primary, #0078d4);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.no-conversations button:hover {
  background-color: var(--primary-dark, #0062a3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
}

.no-conversations button span {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

.no-conversations button {
  background-color: #4a6cf7;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.no-conversations button:hover {
  background-color: #3a5ce5;
}

.loading-conversations {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #666;
  font-size: 14px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #4a6cf7;
  border-radius: 50%;
  margin-right: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.load-more-button {
  width: 100%;
  padding: 8px;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.2s;
}

.load-more-button:hover {
  background-color: #e8e8e8;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .conversation-history {
    background-color: #1e1e1e;
    border-right-color: #333;
  }

  .conversation-history-header {
    background-color: #252525;
    border-bottom-color: #333;
  }

  .conversation-history-header h3 {
    color: #e0e0e0;
  }

  .conversation-item {
    background-color: #252525;
  }

  .conversation-item:hover {
    background-color: #2a2a2a;
    border-color: #444;
  }

  .conversation-item.active {
    background-color: #2c3a5a;
    border-color: #4a6cf7;
  }

  .conversation-title {
    color: #e0e0e0;
  }

  .conversation-meta {
    color: #aaa;
  }

  .conversation-message-count {
    color: #888;
  }

  .open-conversation-button {
    background-color: #4a6cf7;
    color: white;
  }

  .open-conversation-button:hover {
    background-color: #3a5ce5;
  }

  .new-chat-button {
    background-color: var(--primary, #0078d4);
    color: white;
  }

  .new-chat-button:hover {
    background-color: var(--primary-dark, #0062a3);
  }

  .back-arrow-button {
    background-color: #4a6cf7;
    color: white;
  }

  .back-arrow-button:hover {
    background-color: #3a5ce5;
  }

  .delete-conversation-button:hover {
    background-color: #333;
    color: #ff6b6b;
  }

  .no-conversations {
    color: #aaa;
  }

  .loading-conversations {
    color: #aaa;
  }

  .load-more-button {
    background-color: #252525;
    border-color: #333;
    color: #aaa;
  }

  .load-more-button:hover {
    background-color: #2a2a2a;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .conversation-history,
  .conversation-history-header,
  .new-chat-button,
  .conversation-item {
    animation: none !important;
    transition: none !important;
  }

  .conversation-history::before,
  .conversation-history-header::before,
  .new-chat-button::before {
    animation: none !important;
  }

  .new-chat-button:hover,
  .conversation-item:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .conversation-item {
    border-width: 2px;
    border-color: #000000;
  }

  .new-chat-button,
  .open-conversation-button {
    border: 2px solid #ffffff;
  }
}

/* Focus styles for keyboard navigation */
.new-chat-button:focus-visible,
.conversation-item:focus-visible,
.open-conversation-button:focus-visible,
.delete-conversation-button:focus-visible,
.load-more-button:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: 2px;
}

/* Enhanced dark theme adjustments */
[data-theme="dark"] .conversation-history {
  background:
    linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(35, 39, 47, 0.95) 100%);
}

[data-theme="dark"] .conversation-history::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
}

[data-theme="dark"] .conversation-history-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .conversation-item {
  background: rgba(37, 37, 37, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .conversation-item:hover {
  background: rgba(42, 42, 42, 0.95);
  border-color: rgba(74, 108, 247, 0.5);
}
.tool-call-display {
  margin: 8px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

.tool-call-display.expanded {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tool-call-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease;
}

.tool-call-header:hover {
  background-color: #efefef;
}

.tool-call-name {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.tool-icon {
  margin-right: 8px;
  font-size: 16px;
}

.tool-call-status {
  display: flex;
  align-items: center;
}

.status-indicator {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  margin-right: 8px;
}

.status-indicator.pending {
  background-color: #f0f0f0;
  color: #666;
}

.status-indicator.executing {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-indicator.success {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-indicator.error {
  background-color: #ffebee;
  color: #c62828;
}

.expand-icon {
  font-size: 10px;
  color: #666;
}

.tool-call-details {
  padding: 12px;
  background-color: #fff;
}

.tool-call-parameters h4,
.tool-call-result h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #555;
}

.tool-call-parameters pre,
.tool-call-result pre {
  margin: 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.4;
  max-height: 200px;
  overflow-y: auto;
}

.tool-call-result.success pre {
  background-color: #f1f8e9;
  border-left: 3px solid #7cb342;
}

.tool-call-result.error pre {
  background-color: #ffebee;
  border-left: 3px solid #e53935;
}

.error-message {
  color: #c62828;
}

.tool-call-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.execute-button {
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.execute-button:hover {
  background-color: #1976d2;
}

.execute-button:disabled {
  background-color: #bbdefb;
  cursor: not-allowed;
}

/* Status-specific styling for the entire component */
.tool-call-display.pending {
  border-left: 3px solid #9e9e9e;
}

.tool-call-display.executing {
  border-left: 3px solid #2196f3;
}

.tool-call-display.success {
  border-left: 3px solid #4caf50;
}

.tool-call-display.error {
  border-left: 3px solid #f44336;
}
.tool-calls-display {
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  overflow: hidden;
}

.tool-calls-header {
  padding: 10px 12px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #e0e0e0;
}

.tool-calls-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
}

.tool-calls-header h3::before {
  content: '🔧';
  margin-right: 8px;
}

.tool-calls-list {
  padding: 8px;
  max-height: 400px;
  overflow-y: auto;
}

/* Responsive styles */
@media (max-width: 600px) {
  .tool-calls-display {
    margin: 8px 0;
  }
  
  .tool-calls-header h3 {
    font-size: 14px;
  }
  
  .tool-calls-list {
    max-height: 300px;
  }
}
.pulse-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
  background-color: var(--bg-surface-1, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
  overflow: hidden;
  box-sizing: border-box;
  /* Modern entrance animation */
  animation: pulseSlideIn 0.6s ease-out;
  /* Performance optimization */
  will-change: transform, opacity;
  contain: layout style paint;
}

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

/* Scrollable content area */
.pulse-panel > div {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, #44475a) var(--scrollbar-track, #282a36);
}

.pulse-panel > div::-webkit-scrollbar {
  width: 6px;
}

.pulse-panel > div::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #282a36);
}

.pulse-panel > div::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #44475a);
  border-radius: 3px;
}

.pulse-panel > div::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #6272a4);
}

/* Activity card hover effects */
.pulse-panel .activity-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pulse-panel .activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--primary, #0078d4);
}

/* Action button hover effects */
.pulse-panel button:hover {
  background-color: var(--bg-hover, rgba(var(--primary-rgb, 0, 122, 204), 0.1)) !important;
  color: var(--primary, #0078d4) !important;
}

/* Like button special effects */
.pulse-panel button:hover [data-lucide="heart"] {
  transform: scale(1.1);
}

.pulse-panel button:active [data-lucide="heart"] {
  transform: scale(0.95);
}

/* Light theme overrides */
:root[data-theme="light"] .pulse-panel {
  background-color: var(--bg-surface-1-light, #ffffff);
  color: var(--text-primary-light, #333333);
}

:root[data-theme="light"] .pulse-panel > div::-webkit-scrollbar-track {
  background: var(--scrollbar-track-light, #f0f0f0);
}

:root[data-theme="light"] .pulse-panel > div::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-light, #c0c0c0);
}

:root[data-theme="light"] .pulse-panel > div::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-light, #a0a0a0);
}

:root[data-theme="light"] .pulse-panel .activity-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Responsive design */
@media (max-width: 768px) {
  .pulse-panel {
    font-size: 14px;
  }
  
  .pulse-panel .activity-card {
    padding: 12px;
    margin-bottom: 8px;
  }
}

/* Accessibility improvements */
.pulse-panel button:focus-visible {
  outline: 2px solid var(--primary, #0078d4);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pulse-panel .activity-card {
    border-width: 2px;
    border-color: var(--text-primary, #f8f8f2);
  }
  
  .pulse-panel .activity-card:hover {
    border-color: var(--primary, #0078d4);
    background: rgba(0, 120, 212, 0.1);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pulse-panel {
    animation: none;
  }
  
  .pulse-panel .activity-card {
    transition: none;
  }
  
  .pulse-panel .activity-card:hover {
    transform: none;
  }
  
  .pulse-panel button:hover [data-lucide="heart"] {
    transform: none;
  }
}

/* Loading and error states */
.pulse-panel .loading-state,
.pulse-panel .error-state,
.pulse-panel .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.pulse-panel .loading-state {
  animation: pulse 2s ease-in-out infinite alternate;
}

@keyframes pulse {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
/* Enhanced Project Invite Dialog - Modern 2025 UX */
.project-invite-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(20px);
  /* Modern entrance animation */
  animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Performance optimization */
  will-change: opacity, backdrop-filter;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.project-invite-dialog {
  background:
    linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(35, 39, 47, 0.95) 100%);
  border-radius: 24px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  position: relative;
  /* Spring physics animation */
  animation: modalSpringIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Performance optimization */
  will-change: transform, opacity;
}

/* Modern spring entrance animation */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Animated background pattern */
.project-invite-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.project-invite-dialog > * {
  position: relative;
  z-index: 1;
}

[data-theme="light"] .project-invite-dialog {
  background-color: var(--bg-surface-1-light, #ffffff);
  border: 1px solid var(--border-color-light, #e7e7e7);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Enhanced Header */
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(10px);
  position: relative;
  /* Staggered entrance animation */
  animation: headerSlideIn 0.5s ease-out 0.2s both;
}

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

/* Header shimmer effect */
.dialog-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: headerShimmer 3s ease-in-out infinite;
}

@keyframes headerShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

[data-theme="light"] .dialog-header {
  background-color: var(--bg-surface-2-light, #f8f9fa);
  border-bottom: 1px solid var(--border-color-light, #e7e7e7);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Staggered animation */
  animation: contentSlideIn 0.5s ease-out 0.3s both;
}

@keyframes contentSlideIn {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.header-content h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary, #f8f8f2), #cdd6f4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.1); }
}

[data-theme="light"] .header-content h3 {
  color: var(--text-primary-light, #333333);
}

.close-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #a6adc8);
  cursor: pointer;
  padding: 12px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: buttonSlideIn 0.4s ease-out 0.4s both;
}

@keyframes buttonSlideIn {
  from {
    opacity: 0;
    transform: translateX(15px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.close-button:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

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

/* Ripple effect */
.close-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.close-button:active::before {
  width: 100px;
  height: 100px;
}

[data-theme="light"] .close-button {
  color: var(--text-secondary-light, #666666);
}

[data-theme="light"] .close-button:hover {
  background-color: var(--bg-surface-3-light, #f0f0f0);
  color: var(--text-primary-light, #333333);
}

/* Enhanced Content */
.dialog-content {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  /* Staggered entrance animation */
  animation: contentFadeIn 0.6s ease-out 0.3s both;
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Search Section */
.search-section {
  margin-bottom: 24px;
}

.search-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
}

[data-theme="light"] .search-section label {
  color: var(--text-primary-light, #333333);
}

.search-input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #f8f8f2);
  font-size: 15px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  position: relative;
  /* Staggered animation */
  animation: inputSlideIn 0.5s ease-out 0.4s both;
}

@keyframes inputSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.search-input:focus {
  border-color: rgba(78, 205, 196, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 3px rgba(78, 205, 196, 0.2),
    0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease;
}

.search-input:focus::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .search-input {
  background-color: var(--bg-surface-3-light, #ffffff);
  color: var(--text-primary-light, #333333);
  border: 1px solid var(--border-color-light, #e7e7e7);
}

/* Search Results */
.search-results {
  margin-top: 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  background-color: var(--bg-surface-2, #23272f);
  max-height: 200px;
  overflow-y: auto;
}

[data-theme="light"] .search-results {
  background-color: var(--bg-surface-2-light, #f8f9fa);
  border: 1px solid var(--border-color-light, #e7e7e7);
}

.user-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border-color, #333);
}

.user-result:last-child {
  border-bottom: none;
}

.user-result:hover {
  background-color: var(--bg-surface-3, #2a2d3a);
}

.user-result.selected {
  background-color: var(--primary-alpha, rgba(0, 120, 212, 0.2));
  border-color: var(--primary, #0078d4);
}

[data-theme="light"] .user-result {
  border-bottom: 1px solid var(--border-color-light, #e7e7e7);
}

[data-theme="light"] .user-result:hover {
  background-color: var(--bg-surface-3-light, #f0f0f0);
}

/* User Avatar */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--primary, #0078d4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

/* User Info */
.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
  display: block;
  margin-bottom: 2px;
}

.user-email {
  font-size: 12px;
  color: var(--text-secondary, #a6adc8);
}

[data-theme="light"] .user-name {
  color: var(--text-primary-light, #333333);
}

[data-theme="light"] .user-email {
  color: var(--text-secondary-light, #666666);
}

/* Invite Section */
.invite-section {
  margin-top: 24px;
}

.selected-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: var(--bg-surface-2, #23272f);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color, #333);
}

[data-theme="light"] .selected-user {
  background-color: var(--bg-surface-2-light, #f8f9fa);
  border: 1px solid var(--border-color-light, #e7e7e7);
}

/* Role Section */
.role-section {
  margin-bottom: 20px;
}

.role-section label {
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
}

[data-theme="light"] .role-section label {
  color: var(--text-primary-light, #333333);
}

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

.role-option {
  padding: 12px 16px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--bg-surface-3, #2a2d3a);
}

.role-option:hover {
  border-color: var(--primary, #0078d4);
}

.role-option.selected {
  border-color: var(--primary, #0078d4);
  background-color: var(--primary-alpha, rgba(0, 120, 212, 0.1));
}

[data-theme="light"] .role-option {
  background-color: var(--bg-surface-3-light, #ffffff);
  border: 1px solid var(--border-color-light, #e7e7e7);
}

.role-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.role-name {
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
  text-transform: capitalize;
}

.role-description {
  font-size: 12px;
  color: var(--text-secondary, #a6adc8);
}

[data-theme="light"] .role-name {
  color: var(--text-primary-light, #333333);
}

[data-theme="light"] .role-description {
  color: var(--text-secondary-light, #666666);
}

/* Message Section */
.message-section {
  margin-bottom: 20px;
}

.message-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
}

.message-section textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  background-color: var(--bg-surface-3, #2a2d3a);
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  box-sizing: border-box;
}

.message-section textarea:focus {
  border-color: var(--primary, #0078d4);
}

[data-theme="light"] .message-section label {
  color: var(--text-primary-light, #333333);
}

[data-theme="light"] .message-section textarea {
  background-color: var(--bg-surface-3-light, #ffffff);
  color: var(--text-primary-light, #333333);
  border: 1px solid var(--border-color-light, #e7e7e7);
}

/* Security Warning */
.security-warning {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--warning-alpha, rgba(255, 152, 0, 0.1));
  border: 1px solid var(--warning, #ff9800);
  border-radius: 8px;
  margin-bottom: 20px;
}

.warning-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary, #f8f8f2);
}

.warning-text strong {
  color: var(--warning, #ff9800);
}

[data-theme="light"] .warning-text {
  color: var(--text-primary-light, #333333);
}

/* Messages */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: var(--error-alpha, rgba(244, 71, 71, 0.1));
  border: 1px solid var(--error, #f44747);
  border-radius: 8px;
  color: var(--error, #f44747);
  font-size: 14px;
  margin-bottom: 16px;
}

.success-message {
  padding: 12px 16px;
  background-color: var(--success-alpha, rgba(76, 175, 80, 0.1));
  border: 1px solid var(--success, #4caf50);
  border-radius: 8px;
  color: var(--success, #4caf50);
  font-size: 14px;
  margin-bottom: 16px;
}

/* Enhanced Footer */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 28px 32px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-darker);
  backdrop-filter: blur(10px);
  /* Staggered entrance animation */
  animation: footerSlideIn 0.5s ease-out 0.5s both;
}

@keyframes footerSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme="light"] .dialog-footer {
  background-color: var(--bg-darker);
  border-top: 1px solid var(--border-color);
}

.cancel-button {
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary, #a6adc8);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: buttonSlideIn 0.4s ease-out 0.6s both;
}

.cancel-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-primary, #f8f8f2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.cancel-button:active {
  transform: translateY(0);
}

.invite-button {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary, #0078d4), #4ecdc4);
  color: white;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 120, 212, 0.3);
  position: relative;
  overflow: hidden;
  /* Staggered animation */
  animation: buttonSlideIn 0.4s ease-out 0.7s both;
}

.invite-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #106ebe, #5ae4d4);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 120, 212, 0.4);
}

.invite-button:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
}

.invite-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Button shimmer effect */
.invite-button::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;
}

.invite-button:hover:not(:disabled)::before {
  left: 100%;
}

[data-theme="light"] .cancel-button {
  border: 1px solid var(--border-color-light, #e7e7e7);
  color: var(--text-secondary-light, #666666);
}

[data-theme="light"] .cancel-button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary-light, #333333);
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .project-invite-dialog-overlay,
  .project-invite-dialog,
  .dialog-header,
  .header-content,
  .close-button,
  .dialog-content,
  .search-input,
  .dialog-footer,
  .cancel-button,
  .invite-button {
    animation: none !important;
    transition: none !important;
  }

  .project-invite-dialog::before,
  .dialog-header::before,
  .close-button::before,
  .invite-button::before {
    animation: none !important;
  }

  .close-button:hover,
  .search-input:focus,
  .cancel-button:hover,
  .invite-button:hover:not(:disabled) {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .project-invite-dialog {
    border-width: 2px;
    border-color: #ffffff;
  }

  .close-button,
  .cancel-button,
  .invite-button {
    border-width: 2px;
  }

  .search-input:focus {
    border-width: 3px;
    border-color: #ffffff;
  }
}

/* Focus styles for keyboard navigation */
.close-button:focus-visible,
.search-input:focus-visible,
.cancel-button:focus-visible,
.invite-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Enhanced light theme adjustments */
[data-theme="light"] .project-invite-dialog {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .project-invite-dialog::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .dialog-header {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .search-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-primary-light, #333333);
}

[data-theme="light"] .search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .dialog-footer {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 100%);
  border-top-color: rgba(0, 0, 0, 0.08);
}
.friends-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
  background-color: var(--bg-surface-1, #1e1e2e);
  color: var(--text-primary, #f8f8f2);
  overflow: hidden;
  box-sizing: border-box;
  /* Modern entrance animation */
  animation: panelSlideIn 0.6s ease-out;
  /* Performance optimization */
  will-change: transform, opacity;
  contain: layout style paint;
}

@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.friends-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary, #3c3c3c);
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  /* Staggered entrance animation */
  animation: tabsSlideIn 0.5s ease-out 0.2s both;
}

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

.friends-tab {
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text-secondary, #cdd6f4);
  font-size: 14px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

/* Individual tab staggered animations */
.friends-tab:nth-child(1) { animation: tabSlideIn 0.4s ease-out 0.3s both; }
.friends-tab:nth-child(2) { animation: tabSlideIn 0.4s ease-out 0.4s both; }
.friends-tab:nth-child(3) { animation: tabSlideIn 0.4s ease-out 0.5s both; }

@keyframes tabSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.friends-tab:hover {
  color: var(--text-primary, #f8f8f2);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.friends-tab.active {
  color: var(--text-primary, #f8f8f2);
  font-weight: 500;
  background: rgba(0, 120, 212, 0.1);
}

.friends-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary, #0078d4), #4ecdc4);
  animation: activeTabGlow 2s ease-in-out infinite alternate;
}

@keyframes activeTabGlow {
  from { box-shadow: 0 0 5px rgba(0, 120, 212, 0.3); }
  to { box-shadow: 0 0 15px rgba(0, 120, 212, 0.6); }
}

.friends-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.friend-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  /* Staggered entrance animation */
  animation: requestSlideIn 0.5s ease-out both;
}

@keyframes requestSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.friend-request:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 120, 212, 0.3);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.friend-request-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.friend-request-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary, #0078d4), #4ecdc4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 120, 212, 0.3);
  position: relative;
  overflow: hidden;
}

/* Avatar hover animation */
.friend-request:hover .friend-request-avatar {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(0, 120, 212, 0.5);
}

/* Subtle pulse animation */
.friend-request-avatar::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 50%;
  animation: avatarShimmer 3s ease-in-out infinite;
}

@keyframes avatarShimmer {
  0%, 100% { opacity: 0; transform: rotate(0deg); }
  50% { opacity: 1; transform: rotate(180deg); }
}

.friend-request-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.friend-request-username {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
}

.friend-request-message {
  font-size: 12px;
  color: var(--text-secondary, #cdd6f4);
}

.friend-request-actions {
  display: flex;
  gap: 8px;
}

.accept-button {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--success, #4caf50), #66bb6a);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
  position: relative;
  overflow: hidden;
}

.accept-button:hover {
  background: linear-gradient(135deg, #45a049, #5cb85c);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.accept-button:active {
  transform: translateY(0) scale(0.98);
}

.reject-button {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--error, #f44747), #ef5350);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(244, 71, 71, 0.3);
  position: relative;
  overflow: hidden;
}

.reject-button:hover {
  background: linear-gradient(135deg, #d32f2f, #e53935);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(244, 71, 71, 0.4);
}

.reject-button:active {
  transform: translateY(0) scale(0.98);
}

/* Button ripple effect */
.accept-button::before,
.reject-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.accept-button:active::before,
.reject-button:active::before {
  width: 100px;
  height: 100px;
}

.no-requests {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary, #cdd6f4);
  font-size: 14px;
}

.friends-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  gap: 16px;
  margin: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: calc(100% - 24px);
  min-width: 0;
  box-sizing: border-box;
}

/* Individual friend staggered animations */
.friend-item:nth-child(1) { animation: friendSlideIn 0.5s ease-out 0.1s both; }
.friend-item:nth-child(2) { animation: friendSlideIn 0.5s ease-out 0.2s both; }
.friend-item:nth-child(3) { animation: friendSlideIn 0.5s ease-out 0.3s both; }
.friend-item:nth-child(4) { animation: friendSlideIn 0.5s ease-out 0.4s both; }
.friend-item:nth-child(5) { animation: friendSlideIn 0.5s ease-out 0.5s both; }
.friend-item:nth-child(n+6) { animation: friendSlideIn 0.5s ease-out 0.6s both; }

@keyframes friendSlideIn {
  from {
    opacity: 0;
    transform: translateX(-15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.friend-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 120, 212, 0.3);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Subtle shimmer effect on hover */
.friend-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.friend-item:hover::before {
  left: 100%;
}

.friend-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.friend-username {
  font-size: 14px;
}

.friend-status {
  font-size: 12px;
  color: var(--text-secondary, #cdd6f4);
}

.friend-status.online {
  color: var(--success, #4caf50);
}

.friend-status.away {
  color: var(--warning, #ff9800);
}

.no-friends {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary, #cdd6f4);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.find-friends-button {
  padding: 8px 16px;
  background-color: var(--primary, #0078d4);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.find-friends-button:hover {
  background-color: var(--primary-hover, #106ebe);
}

.search-section {
  padding: 16px;
  border-bottom: 1px solid var(--border-primary, #3c3c3c);
}

.search-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-primary, #3c3c3c);
  border-radius: 8px;
  background-color: var(--bg-surface-3, #1a1a2e);
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
  outline: none;
}

.search-input:focus {
  border-color: var(--primary, #0078d4);
}

.search-input::placeholder {
  color: var(--text-secondary, #cdd6f4);
}

.search-results {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-primary, #3c3c3c);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background-color: var(--bg-surface-2, #313244);
}

.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-primary, #3c3c3c);
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-result-item:hover {
  background-color: var(--bg-surface-3, #1a1a2e);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-result-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary, #0078d4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.search-result-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result-username {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #f8f8f2);
}

.search-result-fullname {
  font-size: 12px;
  color: var(--text-secondary, #cdd6f4);
}

.add-friend-button {
  padding: 6px 12px;
  background-color: var(--primary, #0078d4);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-friend-button:hover {
  background-color: var(--primary-hover, #106ebe);
}

.add-friend-button:disabled {
  background-color: var(--text-secondary, #cdd6f4);
  cursor: not-allowed;
}

.friend-status-indicator {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  background-color: var(--bg-surface-3, #1a1a2e);
  color: var(--text-secondary, #cdd6f4);
}

.friend-status-indicator.friends {
  background-color: var(--success-bg, #1b4332);
  color: var(--success, #4caf50);
}

.friend-status-indicator.pending {
  background-color: var(--warning-bg, #3d2914);
  color: var(--warning, #ff9800);
}

/* Light theme overrides */
.friends-panel[data-theme="light"] {
  background-color: var(--bg-surface-1-light, #ffffff);
  color: var(--text-primary-light, #333333);
}

.friends-panel[data-theme="light"] .friends-tab {
  color: var(--text-secondary-light, #666666);
}

.friends-panel[data-theme="light"] .friends-tab:hover {
  color: var(--text-primary-light, #333333);
}

.friends-panel[data-theme="light"] .friends-tab.active {
  color: var(--text-primary-light, #333333);
}

.friends-panel[data-theme="light"] .friend-request {
  background-color: var(--bg-surface-2-light, #f3f3f3);
  border-color: var(--border-primary-light, #e7e7e7);
}

.friends-panel[data-theme="light"] .search-input {
  background-color: var(--bg-surface-3-light, #ffffff);
  border-color: var(--border-primary-light, #e7e7e7);
  color: var(--text-primary-light, #333333);
}

.friends-panel[data-theme="light"] .search-input::placeholder {
  color: var(--text-secondary-light, #666666);
}

.friends-panel[data-theme="light"] .search-results {
  background-color: var(--bg-surface-2-light, #f3f3f3);
  border-color: var(--border-primary-light, #e7e7e7);
}

.friends-panel[data-theme="light"] .search-result-item {
  border-color: var(--border-primary-light, #e7e7e7);
}

.friends-panel[data-theme="light"] .search-result-item:hover {
  background-color: var(--bg-surface-3-light, #ffffff);
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .friends-panel,
  .friends-tabs,
  .friends-tab,
  .friend-request,
  .friend-item,
  .friend-request-avatar,
  .accept-button,
  .reject-button {
    animation: none !important;
    transition: none !important;
  }

  .friends-tab:hover,
  .friend-request:hover,
  .friend-item:hover,
  .accept-button:hover,
  .reject-button:hover {
    transform: none !important;
  }

  .friend-request-avatar::before {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .friend-request,
  .friend-item,
  .accept-button,
  .reject-button {
    border-width: 2px;
    border-color: #ffffff;
  }

  .friend-request:hover,
  .friend-item:hover {
    border-color: #ffff00;
    background: rgba(255, 255, 0, 0.1);
  }
}

/* Focus styles for keyboard navigation */
.friends-tab:focus-visible,
.friend-request:focus-visible,
.friend-item:focus-visible,
.accept-button:focus-visible,
.reject-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.friend-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 4px 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface-2, var(--bg-darker));
  border: 1px solid var(--border-color, var(--border-primary));
  border-left-width: 3px;
  border-left-color: transparent;
}

/* Hide the small clickable indicator since we have the ProfileHoverCard */
.friend-card::after {
  display: none;
}

/* Remove focus outlines from all interactive elements in friends panel */
.friends-panel *:focus,
.friends-panel *:focus-visible,
.friends-panel button:focus,
.friends-panel button:focus-visible,
.friends-panel div[role="button"]:focus,
.friends-panel div[role="button"]:focus-visible,
.friends-panel [tabindex]:focus,
.friends-panel [tabindex]:focus-visible,
.friends-panel [role="tab"]:focus,
.friends-panel [role="tab"]:focus-visible,
.friends-panel .tab-item:focus,
.friends-panel .tab-item:focus-visible,
.friends-panel .tab-button:focus,
.friends-panel .tab-button:focus-visible,
.friend-card:focus,
.friend-card:focus-visible,
.friends-tab-button:focus,
.friends-tab-button:focus-visible,
.friend-chat-button:focus,
.friend-chat-button:focus-visible,
.friend-call-button:focus,
.friend-call-button:focus-visible,
.friend-request-accept-button:focus,
.friend-request-accept-button:focus-visible,
.friend-request-decline-button:focus,
.friend-request-decline-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.friend-card:hover,
.friend-card-hovered {
  background: var(--bg-hover, var(--primary-light));
  border-left-color: var(--primary);
  transform: translateX(2px);
}

/* Removed hover rule for ::after since we're hiding the pseudo-element */

.friend-avatar-container {
  position: relative;
  outline: none !important;
  box-shadow: none !important;
}

.friend-avatar-container:focus,
.friend-avatar-container:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.friend-status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface-2, var(--bg-darker));
}

.friend-status-indicator.online {
  background-color: var(--success, #4caf50);
}

.friend-status-indicator.away {
  background-color: var(--warning, #ff9800);
}

.friend-status-indicator.offline {
  background-color: var(--text-secondary, #9e9e9e);
}

.friends-tab-button {
  position: relative;
  transition: all 0.2s ease;
  outline: none !important;
  box-shadow: none !important;
}

.friends-tab-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Specific rules for the tab navigation buttons in friends panel */
.friends-panel button[style*="padding: 12px 16px"]:focus,
.friends-panel button[style*="padding: 12px 16px"]:focus-visible,
.friends-panel .no-focus-outline:focus,
.friends-panel .no-focus-outline:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.friends-tab-button:hover {
  background-color: var(--bg-surface-2, var(--bg-darker));
}

.friends-tab-button.active {
  background-color: var(--bg-surface-2, var(--bg-darker));
}

.friends-tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary);
}

.friends-search-container {
  position: relative;
  width: 100%;
}

.friends-search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 8px;
  background-color: var(--bg-surface-3, var(--bg-darkest));
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.friends-search-input:focus {
  border-color: var(--primary);
}

.friends-search-input::placeholder {
  color: var(--text-secondary, #a6adc8);
}

.friends-error-message {
  padding: 12px 16px;
  background-color: var(--error-bg, #2d1b1b);
  color: var(--error, #f44747);
  border-radius: 6px;
  margin: 8px 16px;
  font-size: 14px;
  border: 1px solid var(--error, #f44747);
}

.friends-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--text-secondary, #a6adc8);
}

.friends-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary, #a6adc8);
}

.friends-empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
}

.friends-empty-state p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.friend-action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.friend-chat-button {
  padding: 8px 16px;
  background-color: var(--primary, #0078d4);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.friend-chat-button:hover {
  background-color: var(--primary-hover, #106ebe);
  transform: translateY(-1px);
}

.friend-call-button {
  padding: 8px 16px;
  background-color: var(--success, #4caf50);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.friend-call-button:hover {
  background-color: var(--success-hover, #45a049);
  transform: translateY(-1px);
}

.friend-request-accept-button {
  padding: 8px 16px;
  background-color: var(--success, #4caf50);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.friend-request-accept-button:hover {
  background-color: var(--success-hover, #45a049);
  transform: translateY(-1px);
}

.friend-request-decline-button {
  padding: 8px 16px;
  background-color: var(--error, #f44747);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.friend-request-decline-button:hover {
  background-color: var(--error-hover, #d32f2f);
  transform: translateY(-1px);
}

.friends-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.friends-tab-content::-webkit-scrollbar {
  width: 6px;
}

.friends-tab-content::-webkit-scrollbar-track {
  background: var(--bg-surface-1, #1e1e2e);
}

.friends-tab-content::-webkit-scrollbar-thumb {
  background: var(--border-color, #333);
  border-radius: 3px;
}

.friends-tab-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, #a6adc8);
}

.friend-username-display {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin: 0;
  line-height: 1.2;
}

.friend-status-display {
  font-size: 12px;
  color: var(--text-secondary, #a6adc8);
  margin: 4px 0 0 0;
  line-height: 1.2;
}

.friend-status-display.online {
  color: var(--success, #4caf50);
}

.friend-status-display.away {
  color: var(--warning, #ff9800);
}

.friend-status-display.offline {
  color: var(--text-secondary, #a6adc8);
}

.friends-search-section {
  padding: 16px;
  background-color: var(--bg-surface-2, #23272f);
  border-radius: 8px;
  margin: 16px;
  border: 1px solid var(--border-color, #333);
}

.friends-search-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
  margin-bottom: 8px;
}

.friends-search-help {
  font-size: 12px;
  color: var(--text-secondary, #a6adc8);
  margin-top: 8px;
  line-height: 1.4;
}

/* Enhanced invite button styling with high specificity */
.friends-panel .enhanced-invite-button,
.friends-panel .enhanced-invite-button *,
.friends-panel .enhanced-invite-button span,
.friends-panel .enhanced-invite-button svg {
  color: var(--button-text-color, white) !important;
  fill: var(--button-text-color, white) !important;
}

.friends-panel .enhanced-invite-button:hover,
.friends-panel .enhanced-invite-button:hover *,
.friends-panel .enhanced-invite-button:hover span,
.friends-panel .enhanced-invite-button:hover svg {
  color: var(--button-text-color, white) !important;
  fill: var(--button-text-color, white) !important;
}

.friends-panel .enhanced-invite-button:focus,
.friends-panel .enhanced-invite-button:focus *,
.friends-panel .enhanced-invite-button:focus span,
.friends-panel .enhanced-invite-button:focus svg {
  color: var(--button-text-color, white) !important;
  fill: var(--button-text-color, white) !important;
}

.friends-panel .enhanced-invite-button:active,
.friends-panel .enhanced-invite-button:active *,
.friends-panel .enhanced-invite-button:active span,
.friends-panel .enhanced-invite-button:active svg {
  color: var(--button-text-color, white) !important;
  fill: var(--button-text-color, white) !important;
}

/* Dark theme specific overrides */
:root[data-theme="dark"] .friends-panel .enhanced-invite-button,
:root[data-theme="dark"] .friends-panel .enhanced-invite-button *,
:root[data-theme="dark"] .friends-panel .enhanced-invite-button span,
:root[data-theme="dark"] .friends-panel .enhanced-invite-button svg {
  color: var(--button-text-color, white) !important;
  fill: var(--button-text-color, white) !important;
}

/* Ensure it works in all states for dark theme */
:root[data-theme="dark"] .friends-panel .enhanced-invite-button:hover,
:root[data-theme="dark"] .friends-panel .enhanced-invite-button:focus,
:root[data-theme="dark"] .friends-panel .enhanced-invite-button:active {
  color: var(--button-text-color, white) !important;
}

:root[data-theme="dark"] .friends-panel .enhanced-invite-button:hover *,
:root[data-theme="dark"] .friends-panel .enhanced-invite-button:focus *,
:root[data-theme="dark"] .friends-panel .enhanced-invite-button:active * {
  color: var(--button-text-color, white) !important;
  fill: var(--button-text-color, white) !important;
}

/* Light theme overrides */
.friends-panel[data-theme="light"] .friend-status-indicator {
  border-color: var(--bg-surface-2-light, #f3f3f3);
}

.friends-panel[data-theme="light"] .friends-search-input {
  background-color: var(--bg-surface-3-light, #ffffff);
  border-color: var(--border-color-light, #e7e7e7);
  color: var(--text-primary-light, #333333);
}

.friends-panel[data-theme="light"] .friends-search-input::placeholder {
  color: var(--text-secondary-light, #666666);
}

.friends-panel[data-theme="light"] .friends-error-message {
  background-color: var(--error-bg-light, #ffeaea);
  color: var(--error-light, #d32f2f);
  border-color: var(--error-light, #d32f2f);
}

.friends-panel[data-theme="light"] .friends-loading {
  color: var(--text-secondary-light, #666666);
}

.friends-panel[data-theme="light"] .friends-empty-state {
  color: var(--text-secondary-light, #666666);
}

.friends-panel[data-theme="light"] .friends-empty-state h3 {
  color: var(--text-primary-light, #333333);
}

.friends-panel[data-theme="light"] .friend-username-display {
  color: var(--text-primary-light, #333333);
}

.friends-panel[data-theme="light"] .friend-status-display {
  color: var(--text-secondary-light, #666666);
}

.friends-panel[data-theme="light"] .friends-search-section {
  background-color: var(--bg-surface-2-light, #f3f3f3);
  border-color: var(--border-color-light, #e7e7e7);
}

.friends-panel[data-theme="light"] .friends-search-label {
  color: var(--text-primary-light, #333333);
}

.friends-panel[data-theme="light"] .friends-search-help {
  color: var(--text-secondary-light, #666666);
}

.friends-panel[data-theme="light"] .friends-tab-content::-webkit-scrollbar-track {
  background: var(--bg-surface-1-light, #ffffff);
}

.friends-panel[data-theme="light"] .friends-tab-content::-webkit-scrollbar-thumb {
  background: var(--border-color-light, #e7e7e7);
}

.friends-panel[data-theme="light"] .friends-tab-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary-light, #666666);
}

/* Final comprehensive focus outline removal for friends panel */
.friends-panel,
.friends-panel *,
.friends-panel button,
.friends-panel [role="button"],
.friends-panel [tabindex],
.friends-panel [role="tab"],
.friends-panel .tab-item,
.friends-panel .tab-button {
  outline: none !important;
  box-shadow: none !important;
}

/* Dark mode specific focus outline removal */
:root[data-theme="dark"] .friends-panel,
:root[data-theme="dark"] .friends-panel *,
:root[data-theme="dark"] .friends-panel button,
:root[data-theme="dark"] .friends-panel [role="button"],
:root[data-theme="dark"] .friends-panel [tabindex],
:root[data-theme="dark"] .friends-panel [role="tab"],
:root[data-theme="dark"] .friends-panel .tab-item,
:root[data-theme="dark"] .friends-panel .tab-button {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.friends-panel:focus,
.friends-panel *:focus,
.friends-panel button:focus,
.friends-panel [role="button"]:focus,
.friends-panel [tabindex]:focus,
.friends-panel [role="tab"]:focus,
.friends-panel .tab-item:focus,
.friends-panel .tab-button:focus,
.friends-panel:focus-visible,
.friends-panel *:focus-visible,
.friends-panel button:focus-visible,
.friends-panel [role="button"]:focus-visible,
.friends-panel [tabindex]:focus-visible,
.friends-panel [role="tab"]:focus-visible,
.friends-panel .tab-item:focus-visible,
.friends-panel .tab-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Dark mode focus states - extra specificity */
:root[data-theme="dark"] .friends-panel:focus,
:root[data-theme="dark"] .friends-panel *:focus,
:root[data-theme="dark"] .friends-panel button:focus,
:root[data-theme="dark"] .friends-panel [role="button"]:focus,
:root[data-theme="dark"] .friends-panel [tabindex]:focus,
:root[data-theme="dark"] .friends-panel [role="tab"]:focus,
:root[data-theme="dark"] .friends-panel .tab-item:focus,
:root[data-theme="dark"] .friends-panel .tab-button:focus,
:root[data-theme="dark"] .friends-panel:focus-visible,
:root[data-theme="dark"] .friends-panel *:focus-visible,
:root[data-theme="dark"] .friends-panel button:focus-visible,
:root[data-theme="dark"] .friends-panel [role="button"]:focus-visible,
:root[data-theme="dark"] .friends-panel [tabindex]:focus-visible,
:root[data-theme="dark"] .friends-panel [role="tab"]:focus-visible,
:root[data-theme="dark"] .friends-panel .tab-item:focus-visible,
:root[data-theme="dark"] .friends-panel .tab-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
/* 🎨 Glassmorphism Effects for Friends Panel - 2025 UX */

/* Remove focus outlines from interactive cards - visual feedback is sufficient */
.glass-card:focus,
.search-card:focus,
.message-card:focus,
.friend-card:focus,
.glass-button:focus,
.tab-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Core Glassmorphism Properties */
.glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Search Card Glassmorphism - Uniform with other tabs */
.search-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.search-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-card:hover::before {
  opacity: 1;
}

.search-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.12);
}

/* Message Card Glassmorphism */
.message-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.message-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Friend Card Glassmorphism */
.friend-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.friend-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.12);
}

/* Glass Button Styles - Compact for uniform sizing */
.glass-button {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.glass-button:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.glass-button.primary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(167, 139, 250, 0.6) 100%);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: white;
}

.glass-button.primary:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(167, 139, 250, 0.7) 100%);
  border: 1px solid rgba(139, 92, 246, 0.6);
  box-shadow: 0 8px 16px rgba(139, 92, 246, 0.3);
}

.glass-button.secondary {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.7) 0%, rgba(6, 182, 212, 0.5) 100%);
  border: 1px solid rgba(78, 205, 196, 0.4);
  color: white;
}

.glass-button.secondary:hover {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.8) 0%, rgba(6, 182, 212, 0.6) 100%);
  border: 1px solid rgba(78, 205, 196, 0.6);
  box-shadow: 0 8px 16px rgba(78, 205, 196, 0.3);
}

.glass-button.success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(34, 197, 94, 0.6) 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: white;
}

/* Glass Input Styles - Enhanced Visibility & Stability */
.glass-input {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 2px solid rgba(139, 92, 246, 0.3);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease; /* Reduced transition time for stability */
  outline: none;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
  width: 100%;
  box-sizing: border-box;
  position: relative; /* Prevent layout shifts */
}

.glass-input:focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 2px solid rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 8px 20px rgba(139, 92, 246, 0.2);
  /* Removed transform to prevent layout shifts */
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

/* Light theme adjustments for search input */
[data-theme="light"] .glass-input {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%);
  border: 2px solid rgba(139, 92, 246, 0.4);
  color: rgba(0, 0, 0, 0.9);
}

[data-theme="light"] .glass-input:focus {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.06) 100%);
  border: 2px solid rgba(139, 92, 246, 0.7);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 8px 20px rgba(139, 92, 246, 0.2);
}

[data-theme="light"] .glass-input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

/* Avatar Glassmorphism */
.glass-avatar {
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-avatar:hover {
  border: 2px solid rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Unread Badge */
.unread-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  min-width: 20px;
  text-align: center;
}

/* Online Status Indicator */
.online-indicator {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  position: absolute;
  bottom: 2px;
  right: 2px;
  backdrop-filter: blur(5px);
}

/* Dark theme adjustments */
[data-theme="dark"] .glass-card,
[data-theme="dark"] .search-card,
[data-theme="dark"] .message-card,
[data-theme="dark"] .friend-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .glass-card:hover,
[data-theme="dark"] .search-card:hover,
[data-theme="dark"] .message-card:hover,
[data-theme="dark"] .friend-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Light theme adjustments */
[data-theme="light"] .glass-card,
[data-theme="light"] .search-card,
[data-theme="light"] .message-card,
[data-theme="light"] .friend-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .glass-card:hover,
[data-theme="light"] .search-card:hover,
[data-theme="light"] .message-card:hover,
[data-theme="light"] .friend-card:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.channel-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.channel-dialog {
  background-color: #36393f;
  border-radius: 5px;
  width: 440px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: #dcddde;
}

.channel-dialog-header {
  padding: 16px;
  border-bottom: 1px solid #202225;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-dialog-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.close-button {
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: #dcddde;
}

.channel-dialog form {
  padding: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #b9bbbe;
  text-transform: uppercase;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 10px;
  color: #b9bbbe;
}

.form-group input[type="text"] {
  width: 100%;
  padding: 10px 10px 10px 32px;
  background-color: #202225;
  border: 1px solid #202225;
  border-radius: 3px;
  color: #dcddde;
  font-size: 14px;
}

.form-group input[type="text"]:focus {
  outline: none;
  border-color: #7289da;
}

.form-group select {
  width: 100%;
  padding: 10px;
  background-color: #202225;
  border: 1px solid #202225;
  border-radius: 3px;
  color: #dcddde;
  font-size: 14px;
  appearance: none;
}

.form-group select:focus {
  outline: none;
  border-color: #7289da;
}

.channel-type-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.channel-type-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 3px;
  cursor: pointer;
  background-color: #2f3136;
  border: 1px solid #202225;
}

.channel-type-option.selected {
  background-color: #202225;
  border-color: #7289da;
}

.option-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #fff;
}

.option-description {
  font-size: 12px;
  color: #b9bbbe;
}

.privacy-option {
  margin-top: 8px;
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
}

.checkbox-wrapper input[type="checkbox"] {
  margin-right: 10px;
  margin-top: 3px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cancel-button {
  background-color: transparent;
  border: none;
  color: #b9bbbe;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-button:hover {
  text-decoration: underline;
}

.create-button {
  background-color: #5865f2;
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.create-button:hover {
  background-color: #4752c4;
}

.error-message {
  color: #f04747;
  font-size: 12px;
  margin-top: 4px;
}
.channel-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Light theme */
.channel-dialog.light {
  background-color: var(--bg-surface-2-light, #f3f3f3);
  border-radius: 5px;
  width: 440px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: var(--text-primary-light, #333333);
}

/* Dark theme */
.channel-dialog.dark {
  background-color: var(--bg-surface-2, #23272f);
  border-radius: 5px;
  width: 440px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: var(--text-primary, #f8f8f2);
}

/* Light theme header */
.channel-dialog.light .channel-dialog-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color-light, #e7e7e7);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dark theme header */
.channel-dialog.dark .channel-dialog-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #333);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-dialog-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.channel-dialog.light .channel-dialog-header h2 {
  color: var(--text-primary-light, #333333);
}

.channel-dialog.dark .channel-dialog-header h2 {
  color: var(--text-primary, #f8f8f2);
}

.close-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.channel-dialog.light .close-button {
  color: var(--text-secondary-light, #666666);
}

.channel-dialog.dark .close-button {
  color: var(--text-secondary, #a6adc8);
}

.channel-dialog.light .close-button:hover {
  color: var(--text-primary-light, #333333);
}

.channel-dialog.dark .close-button:hover {
  color: var(--text-primary, #f8f8f2);
}

.channel-dialog form {
  padding: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.channel-dialog.light .form-group label {
  color: var(--text-secondary-light, #666666);
}

.channel-dialog.dark .form-group label {
  color: var(--text-secondary, #a6adc8);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.channel-dialog.light .input-icon {
  position: absolute;
  left: 10px;
  color: var(--text-secondary-light, #666666);
}

.channel-dialog.dark .input-icon {
  position: absolute;
  left: 10px;
  color: var(--text-secondary, #a6adc8);
}

.channel-dialog.light .form-group input[type="text"] {
  width: 100%;
  padding: 10px 10px 10px 32px;
  background-color: var(--bg-surface-3-light, #e8e8e8);
  border: 1px solid var(--border-color-light, #e7e7e7);
  border-radius: 3px;
  color: var(--text-primary-light, #333333);
  font-size: 14px;
}

.channel-dialog.dark .form-group input[type="text"] {
  width: 100%;
  padding: 10px 10px 10px 32px;
  background-color: var(--bg-surface-3, #181a20);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
}

.channel-dialog.light .form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--primary, #007acc);
}

.channel-dialog.dark .form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--primary, #007acc);
}

.channel-dialog.light .form-group select {
  width: 100%;
  padding: 10px;
  background-color: var(--bg-surface-3-light, #e8e8e8);
  border: 1px solid var(--border-color-light, #e7e7e7);
  border-radius: 3px;
  color: var(--text-primary-light, #333333);
  font-size: 14px;
  appearance: none;
}

.channel-dialog.dark .form-group select {
  width: 100%;
  padding: 10px;
  background-color: var(--bg-surface-3, #181a20);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  color: var(--text-primary, #f8f8f2);
  font-size: 14px;
  appearance: none;
}

.channel-dialog.light .form-group select:focus {
  outline: none;
  border-color: var(--primary, #007acc);
}

.channel-dialog.dark .form-group select:focus {
  outline: none;
  border-color: var(--primary, #007acc);
}

.channel-type-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.channel-dialog.light .channel-type-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 3px;
  cursor: pointer;
  background-color: var(--bg-surface-3-light, #e8e8e8);
  border: 1px solid var(--border-color-light, #e7e7e7);
}

.channel-dialog.dark .channel-type-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 3px;
  cursor: pointer;
  background-color: var(--bg-surface-3, #181a20);
  border: 1px solid var(--border-color, #333);
}

.channel-dialog.light .channel-type-option.selected {
  background-color: var(--bg-surface-3-light, #e8e8e8);
  border-color: var(--primary, #007acc);
}

.channel-dialog.dark .channel-type-option.selected {
  background-color: var(--bg-surface-3, #181a20);
  border-color: var(--primary, #007acc);
}

.channel-dialog.light .option-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary-light, #333333);
}

.channel-dialog.dark .option-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary, #f8f8f2);
}

.channel-dialog.light .option-description {
  font-size: 12px;
  color: var(--text-secondary-light, #666666);
}

.channel-dialog.dark .option-description {
  font-size: 12px;
  color: var(--text-secondary, #a6adc8);
}

.privacy-option {
  margin-top: 8px;
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
}

.checkbox-wrapper input[type="checkbox"] {
  margin-right: 10px;
  margin-top: 3px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.channel-dialog.light .cancel-button {
  background-color: transparent;
  border: none;
  color: var(--text-secondary-light, #666666);
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.channel-dialog.dark .cancel-button {
  background-color: transparent;
  border: none;
  color: var(--text-secondary, #a6adc8);
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.channel-dialog.light .cancel-button:hover {
  text-decoration: underline;
  color: var(--text-primary-light, #333333);
}

.channel-dialog.dark .cancel-button:hover {
  text-decoration: underline;
  color: var(--text-primary, #f8f8f2);
}

.channel-dialog.light .create-button {
  background-color: var(--primary, #007acc);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.channel-dialog.dark .create-button {
  background-color: var(--primary, #007acc);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.channel-dialog.light .create-button:hover {
  background-color: var(--primary-dark, #005fa3);
}

.channel-dialog.dark .create-button:hover {
  background-color: var(--primary-dark, #005fa3);
}

.channel-dialog.light .error-message {
  color: var(--error, #f44336);
  font-size: 12px;
  margin-top: 4px;
}

.channel-dialog.dark .error-message {
  color: var(--error, #f44336);
  font-size: 12px;
  margin-top: 4px;
}
/* ChannelsPanel.css */

.channels-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface-1, #ffffff);
  border: 1px solid var(--border-color, #cccccc);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Header styles */
.channels-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  background: var(--bg-surface-2, #f3f3f3);
  border-bottom: 1px solid var(--border-color, #cccccc);
  height: 48px;
  flex-shrink: 0;
}

.channels-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #333333);
}

.channels-toggle-button {
  background: transparent;
  border: none;
  color: var(--text-secondary, #666666);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.channels-toggle-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Single column layout */
.channels-single-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* Channel list section styles */
.channels-list-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-2, #f3f3f3);
  border-bottom: 1px solid var(--border-color, #cccccc);
  overflow-y: auto;
  max-height: 70vh; /* Limit height to 70% of viewport height */
}

/* Channel content section styles */
.channels-content-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-1, #ffffff);
  overflow: auto;
  min-height: 300px; /* Ensure minimum height */
}

/* Friends list styles */
.friends-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.friends-list-header {
  padding: 16px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #333333);
  border-bottom: 1px solid var(--border-color, #cccccc);
}

.friends-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border-color-light, #eeeeee);
}

.friend-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.friend-item.active {
  background-color: rgba(0, 122, 204, 0.1);
}

.friend-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bg-surface-3, #dddddd);
  margin-right: 12px;
  position: relative;
}

.friend-status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface-2, #f3f3f3);
}

.friend-item.online .friend-status-indicator {
  background-color: var(--status-online, #43b581);
}

.friend-item.idle .friend-status-indicator {
  background-color: var(--status-idle, #faa61a);
}

.friend-item.dnd .friend-status-indicator {
  background-color: var(--status-dnd, #f04747);
}

.friend-item.offline .friend-status-indicator {
  background-color: var(--status-offline, #747f8d);
}

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

.friend-name {
  font-weight: 500;
  color: var(--text-primary, #333333);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-status-text {
  font-size: 12px;
  color: var(--text-secondary, #666666);
}

.friend-action-button {
  background: transparent;
  border: none;
  color: var(--text-secondary, #666666);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.friend-item:hover .friend-action-button {
  opacity: 1;
}

/* Settings list styles */
.settings-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.settings-list-header {
  padding: 16px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #333333);
  border-bottom: 1px solid var(--border-color, #cccccc);
}

.settings-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.settings-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border-color-light, #eeeeee);
}

.settings-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Friend profile styles */
.friend-profile {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.friend-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.friend-profile-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.open-chat-button {
  background-color: var(--primary, #007acc);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.open-chat-button:hover {
  background-color: var(--primary-dark, #005a9e);
}

/* Empty state styles */
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 32px 24px;
  text-align: center;
  color: var(--text-secondary, #666666);
  background-color: var(--bg-surface-1, #ffffff);
  border-radius: 8px;
  margin: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.empty-state h2 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #333333);
}

.empty-state p {
  max-width: 400px;
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .channels-sidebar {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
  }

  .channels-nav-label {
    display: none;
  }

  .channels-nav-tab {
    padding: 0 12px;
  }

  .channels-nav-icon {
    margin-right: 0;
  }
}

/* Create Channel Dialog */
.create-channel-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.create-channel-dialog {
  background-color: var(--bg-surface-1, #36393f);
  border-radius: 5px;
  width: 480px;
  max-width: 90vw;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: var(--text-primary, #dcddde);
  display: flex;
  flex-direction: column;
}

.create-channel-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #202225);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.create-channel-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.close-button {
  background: transparent;
  border: none;
  color: var(--text-secondary, #b9bbbe);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: var(--text-primary, #dcddde);
}

.create-channel-content {
  padding: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #b9bbbe);
  text-transform: uppercase;
}

.form-group input[type="text"],
.form-group select {
  width: 100%;
  padding: 10px;
  background-color: var(--bg-surface-2, #202225);
  border: 1px solid var(--border-color, #202225);
  border-radius: 3px;
  color: var(--text-primary, #dcddde);
  font-size: 14px;
}

.form-group input[type="text"]:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary, #7289da);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.radio-label:hover {
  background-color: rgba(79, 84, 92, 0.3);
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
}

.checkbox-wrapper input[type="checkbox"] {
  margin-right: 10px;
  margin-top: 3px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.option-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary, #fff);
}

.option-description {
  font-size: 12px;
  color: var(--text-secondary, #b9bbbe);
}

.create-channel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  background-color: var(--bg-surface-2, #2f3136);
  border-top: 1px solid var(--border-color, #202225);
}

.cancel-button {
  background-color: transparent;
  border: none;
  color: var(--text-secondary, #b9bbbe);
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-button:hover {
  text-decoration: underline;
}

.create-button {
  background-color: var(--primary, #5865f2);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.create-button:hover {
  background-color: var(--primary-dark, #4752c4);
}
/* ResizablePanel Component Styles */
.resizable-panel {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  transition: width 0.2s ease-out;
  z-index: 10;
}

/* Right panel specific styles */
.resizable-panel-right {
  border-left: none;
  background-color: var(--bg-surface-2, #1e1e2e);
}

/* Left panel specific styles */
.resizable-panel-left {
  border-right: none;
  background-color: var(--bg-surface-2, #1e1e2e);
}

/* Resizer styles */
.resizable-panel-resizer {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 12px !important;
  cursor: col-resize !important;
  z-index: 10000 !important;
  background-color: rgba(60, 60, 60, 0.5) !important;
  touch-action: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s !important;
}

/* Right panel resizer */
.resizable-panel-resizer-right {
  left: 0;
  border-right: 1px solid var(--border-primary, #3c3c3c);
}

/* Left panel resizer */
.resizable-panel-resizer-left {
  right: 0;
  border-left: 1px solid var(--border-primary, #3c3c3c);
}

/* Add a visible handle */
.resizable-panel-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 4px;
  background-color: #888;
  opacity: 0.7;
  transition: background-color 0.2s, opacity 0.2s, width 0.2s, left 0.2s;
}

/* Highlight on hover */
.resizable-panel-resizer:hover,
.resizable-panel-resizer:active,
body.resizing-right-panel .resizable-panel-resizer-right,
body.resizing-left-panel .resizable-panel-resizer-left {
  background-color: rgba(116, 199, 236, 0.7) !important;
  opacity: 1 !important;
}

.resizable-panel-resizer:hover::after,
.resizable-panel-resizer:active::after,
body.resizing-right-panel .resizable-panel-resizer-right::after,
body.resizing-left-panel .resizable-panel-resizer-left::after {
  background-color: #74c7ec !important;
  opacity: 1 !important;
  width: 6px !important;
  left: 3px !important;
}

/* Panel content */
.resizable-panel-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Disable transitions during resize */
body.resizing .resizable-panel,
body.resizing .resizable-panel-content,
body.resizing .resizable-panel * {
  transition: none !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .resizable-panel {
    min-width: 250px;
  }
}

@media (max-width: 768px) {
  .resizable-panel {
    min-width: 200px;
  }
}
/* Panel Animations CSS
 * This file contains animations and transitions for panel components
 */

/* Panel collapse/expand animations */
.panel-collapsible {
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease;
}

.panel-collapsed {
  height: 0 !important;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.panel-expanded {
  opacity: 1;
}

/* Panel resize handle animations */
.panel-resize-handle {
  position: relative;
  transition: background-color 0.2s ease;
}

.panel-resize-handle:hover {
  background-color: var(--primary);
}

.panel-resize-handle:active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary);
  opacity: 0.3;
  pointer-events: none;
}

/* Panel maximize animation */
.panel-maximized {
  animation: panel-maximize 0.3s ease forwards;
}

@keyframes panel-maximize {
  from {
    transform: scale(0.95);
    opacity: 0.8;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Panel memory - restore panel size animation */
.panel-restore {
  animation: panel-restore 0.25s ease-out;
}

@keyframes panel-restore {
  from {
    opacity: 0.7;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Panel toggle button animations */
.panel-toggle-button {
  transition: transform 0.3s ease, background-color 0.2s ease;
}

.panel-toggle-button:hover {
  background-color: var(--bg-hover);
}

.panel-toggle-button.collapsed {
  transform: rotate(180deg);
}

/* Panel content fade animation */
.panel-content {
  transition: opacity 0.2s ease;
}

.panel-content.loading {
  opacity: 0.6;
}

/* Panel layout animations */
.panel-layout-transition {
  transition: width 0.3s ease, height 0.3s ease, flex-basis 0.3s ease;
}
.es-resizer {
  position: relative;
  z-index: 1000;
  transition: background-color 0.2s ease;
}

.es-resizer-vertical {
  width: 8px;
  margin: 0 -4px;
  cursor: col-resize;
  background-color: transparent;
}

.es-resizer-horizontal {
  height: 8px;
  margin: -4px 0;
  cursor: row-resize;
  background-color: transparent;
}

/* Right panel resizer - completely new implementation */
.right-panel-resizer {
  position: relative !important;
  width: 8px !important;
  height: 100% !important;
  cursor: col-resize !important;
  z-index: 1000 !important;
  background-color: var(--border-primary, #3c3c3c) !important;
  margin: 0 !important;
  padding: 0 !important;
  touch-action: none !important; /* Prevent touch scrolling */
  user-select: none !important; /* Prevent text selection */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  border-left: 1px solid var(--border-primary, #3c3c3c) !important;
  border-right: 1px solid var(--border-primary, #3c3c3c) !important;
}

/* Add a visible handle */
.right-panel-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background-color: #666;
  opacity: 0.5;
  transition: background-color 0.2s, opacity 0.2s, width 0.2s, left 0.2s;
}

/* Highlight on hover */
.right-panel-resizer:hover::after,
.right-panel-resizer.es-resizer-dragging::after,
body.resizing-right-panel .right-panel-resizer::after {
  background-color: #74c7ec;
  opacity: 1;
  width: 4px;
  left: 2px;
}

.es-resizer:hover,
.es-resizer-dragging {
  background-color: #ccc;
  opacity: 0.3;
}

/* Light theme adjustments */
:root[data-theme="light"] .es-resizer:hover,
:root[data-theme="light"] .es-resizer-dragging {
  background-color: #ccc;
  opacity: 0.4;
}._container_1vm1v_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 2rem;
  background-color: var(--background-color);
  color: var(--text-color);
}

._content_1vm1v_13 {
  max-width: 1000px;
  width: 100%;
  background-color: var(--background-color-secondary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

._header_1vm1v_22 {
  text-align: center;
  margin-bottom: 2rem;
}

._header_1vm1v_22 h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

._subtitle_1vm1v_33 {
  font-size: 1.2rem;
  color: var(--text-color-secondary);
  max-width: 600px;
  margin: 0 auto;
}

._quickStart_1vm1v_40 {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background-color: var(--background-color);
  border-radius: 8px;
}

._quickStart_1vm1v_40 h2 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

._createButton_1vm1v_53 {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  margin-bottom: 1rem;
}

._createButton_1vm1v_53:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-2px);
}

._createButton_1vm1v_53:disabled {
  background-color: var(--disabled-color);
  cursor: not-allowed;
  transform: none;
}

._description_1vm1v_77 {
  color: var(--text-color-secondary);
  max-width: 500px;
  margin: 0 auto;
}

._templatesSection_1vm1v_83 {
  margin-bottom: 2rem;
}

._templatesSection_1vm1v_83 h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

._templates_1vm1v_83 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

._templateCard_1vm1v_99 {
  background-color: var(--background-color);
  border-radius: 8px;
  padding: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border-color);
  height: 100%;
  display: flex;
  flex-direction: column;
}

._templateCard_1vm1v_99:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

._selectedTemplate_1vm1v_116 {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-color-light);
  transform: translateY(-5px);
}

._templateHeader_1vm1v_122 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

._templateHeader_1vm1v_122 h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--primary-color);
}

._templateSpinner_1vm1v_135 {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: _spin_1vm1v_1 1s linear infinite;
}

@keyframes _spin_1vm1v_1 {
  to { transform: rotate(360deg); }
}

._templateCard_1vm1v_99 p {
  color: var(--text-color-secondary);
  margin-bottom: 1rem;
  flex-grow: 1;
}

._templateTools_1vm1v_154 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

._toolBadge_1vm1v_161 {
  background-color: var(--background-color-tertiary);
  color: var(--text-color-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

._error_1vm1v_169 {
  background-color: var(--error-background);
  color: var(--error-color);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Dark mode adjustments */
.dark-theme ._content_1vm1v_13 {
  background-color: var(--background-color-dark-secondary);
}

.dark-theme ._quickStart_1vm1v_40 {
  background-color: var(--background-color-dark);
}

.dark-theme ._templateCard_1vm1v_99 {
  background-color: var(--background-color-dark);
  border-color: var(--border-color-dark);
}

.dark-theme ._templateSpinner_1vm1v_135 {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  ._container_1vm1v_1 {
    padding: 1rem;
  }
  
  ._content_1vm1v_13 {
    padding: 1.5rem;
  }
  
  ._header_1vm1v_22 h1 {
    font-size: 2rem;
  }
  
  ._templates_1vm1v_83 {
    grid-template-columns: 1fr;
  }
}

/* Empty State */
._emptyState_1vm1v_217 {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 500px;
  margin: 0 auto;
}

._emptyIcon_1vm1v_224 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

._emptyState_1vm1v_217 h2 {
  margin: 0 0 1rem 0;
  font-size: 1.8rem;
  color: var(--text-color);
  font-weight: 600;
}

._emptyState_1vm1v_217 ._description_1vm1v_77 {
  margin: 0 0 2rem 0;
  font-size: 1.1rem;
  color: var(--text-color-secondary);
  line-height: 1.5;
}

._createButton_1vm1v_53 {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._createButton_1vm1v_53:hover {
  background-color: var(--primary-color-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._createButton_1vm1v_53:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Global Voice Bar Styles */

.global-voice-bar {
  /* Enhanced voice bar with modern design */
  box-sizing: border-box;
  margin: 0;
  padding: 12px 20px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  overflow: visible;

  /* Modern styling */
  background: linear-gradient(135deg,
    rgba(49, 50, 68, 0.95) 0%,
    rgba(42, 42, 58, 0.95) 100%);
  border-top: 1px solid rgba(78, 205, 196, 0.3);
  backdrop-filter: blur(20px);
  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Animation */
  animation: voiceBarSlideUp 0.5s ease-out;
  position: relative;
  z-index: var(--z-index-voice-bar, 90); /* Lower than workspace but above panels */
}

@keyframes voiceBarSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animated background pattern */
.global-voice-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
  pointer-events: none;
  animation: backgroundShift 8s ease-in-out infinite;
  z-index: 0;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.global-voice-bar > * {
  position: relative;
  z-index: 1;
}

.voice-control-btn {
  position: relative;
  overflow: hidden;
}

.voice-control-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.voice-control-btn:active::before {
  width: 100%;
  height: 100%;
}

.voice-control-btn > * {
  position: relative;
  z-index: 1;
}

/* Enhanced speaking indicator */
.enhanced-speaking-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  animation: speakingGlow 2s ease-in-out infinite;
}

.enhanced-speaking-indicator .speaking-icon {
  color: #10b981;
  animation: iconBounce 1s ease-in-out infinite;
}

.enhanced-speaking-indicator .speaking-text {
  color: #10b981;
  font-size: 13px;
  font-weight: 600;
}

.enhanced-speaking-indicator .audio-visualizer {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 16px;
}

.enhanced-speaking-indicator .audio-bar {
  width: 2px;
  background: #10b981;
  border-radius: 1px;
  animation: audioWave 0.8s ease-in-out infinite;
}

.enhanced-speaking-indicator .audio-bar:nth-child(1) { animation-delay: 0s; }
.enhanced-speaking-indicator .audio-bar:nth-child(2) { animation-delay: 0.1s; }
.enhanced-speaking-indicator .audio-bar:nth-child(3) { animation-delay: 0.2s; }
.enhanced-speaking-indicator .audio-bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes speakingGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes audioWave {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

/* Pulse animation for connection indicator */
@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hover effects */
.voice-control-btn:hover {
  transform: translateY(-1px);
}

.voice-control-btn:active {
  transform: translateY(0);
}

/* Specific button states */
.voice-control-btn.active {
  /* Active state handled by the component */
}

.voice-control-btn.disconnect:hover {
  background: #d32f2f !important;
  transform: translateY(-1px);
}

/* Removed padding-bottom that was raising content */

/* Alternative approach for browsers that don't support :has() */
.app-container {
  padding-bottom: 0;
  transition: padding-bottom 0.2s ease;
}

/* Removed padding-bottom that was raising content */

/* Responsive design */
@media (max-width: 768px) {
  .global-voice-bar {
    padding: 0 12px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    /* Ensure voice bar doesn't interfere with mobile viewport calculations */
    position: relative;
    z-index: var(--z-index-voice-bar, 90);
  }

  .voice-control-btn {
    width: 36px !important;
    height: 36px !important;
  }

  .voice-control-btn svg {
    width: 16px;
    height: 16px;
  }

  .enhanced-speaking-indicator {
    padding: 6px 12px;
    gap: 8px;
  }

  .enhanced-speaking-indicator .speaking-text {
    font-size: 11px;
  }

  .enhanced-speaking-indicator .audio-visualizer {
    height: 12px;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .global-voice-bar {
    padding: 0 8px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .voice-control-btn {
    width: 32px !important;
    height: 32px !important;
  }

  .voice-control-btn svg {
    width: 14px;
    height: 14px;
  }

  .enhanced-speaking-indicator {
    padding: 4px 8px;
    gap: 6px;
  }

  .enhanced-speaking-indicator .speaking-text {
    font-size: 10px;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .global-voice-bar,
  .enhanced-speaking-indicator,
  .speaking-icon,
  .audio-bar {
    animation: none !important;
    transition: none !important;
  }

  .global-voice-bar::after {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .enhanced-speaking-indicator {
    border-width: 2px;
    border-color: #ffffff;
  }

  .global-voice-bar {
    border-top-width: 2px;
    border-top-color: #ffffff;
  }
}

/* Focus styles for keyboard navigation */
.enhanced-speaking-indicator:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Voice bar container responsive behavior */
.voice-bar-container {
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  overflow: hidden;
  position: relative;
  z-index: var(--z-index-voice-bar, 90);
}

@media (max-width: 480px) {
  .voice-bar-container {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }
}

/* Light theme adjustments */
[data-theme="light"] .global-voice-bar {
  background: linear-gradient(135deg,
    rgba(248, 249, 250, 0.95) 0%,
    rgba(240, 240, 240, 0.95) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .enhanced-speaking-indicator {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .global-voice-bar::after {
  background:
    radial-gradient(circle at 20% 50%, rgba(0, 120, 212, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(78, 205, 196, 0.05) 0%, transparent 50%);
}
/* Voice Components CSS */

/* Animations */
@keyframes slideDown {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Global Voice Bar Styles */
.global-voice-bar {
  /* Base styles are handled inline for theme support */
}

.global-voice-bar .voice-control-btn {
  transition: all 0.2s ease;
}

.global-voice-bar .voice-control-btn:hover {
  transform: scale(1.05);
}

.global-voice-bar .voice-control-btn:active {
  transform: scale(0.95);
}

/* Floating Video Window Styles */
.floating-video-window {
  /* Base styles are handled inline for theme support */
}

.floating-video-window:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Screen Share Indicator Styles */
.screen-share-indicator {
  /* Base styles are handled inline for theme support */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .global-voice-bar {
    padding: 0 12px !important;
  }
  
  .global-voice-bar .voice-control-btn {
    width: 36px !important;
    height: 36px !important;
  }
  
  .floating-video-window {
    width: 280px !important;
    height: 200px !important;
  }
}

@media (max-width: 480px) {
  .global-voice-bar {
    padding: 0 8px !important;
  }
  
  .global-voice-bar .voice-control-btn {
    width: 32px !important;
    height: 32px !important;
  }
  
  .floating-video-window {
    width: 240px !important;
    height: 160px !important;
  }
}
/* packages/frontend/src/components/layout/Layout.module.css */
._layout_10tcp_2 {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Allow expansion beyond viewport */
  width: 100vw;
  overflow: visible; /* Allow content to expand beyond viewport */
  background-color: var(--bg-darkest);
  color: var(--text-primary);
}

._middleArea_10tcp_12 {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: visible; /* Allow content to expand beyond middle area */
  position: relative;
}

._mainArea_10tcp_20 {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: visible; /* Allow content to expand beyond main area */
  position: relative;
}

._mainAreaWithSidebar_10tcp_28 {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important; /* Keep container overflow hidden, let children handle scrolling */
  position: relative !important;
  align-items: stretch !important; /* Ensure children stretch to full height */
  box-sizing: border-box !important;
  min-height: 0 !important; /* Allow content to shrink */
  min-width: 0 !important; /* Allow content to shrink */
  z-index: 1 !important; /* Ensure it's above other elements */
}

._mainContent_10tcp_42 {
  flex: 1 1 auto !important;
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible; /* Allow content to expand beyond main content area */
  position: relative;
  background-color: var(--bg-darker);
}

._sidebar_10tcp_55 {
  width: 438px; /* 250 * 1.75 = 437.5, rounded to 438 */
  height: 100%;
  background-color: var(--bg-surface-2);
  border-right: 1px solid var(--border-color);
  transition: width 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  z-index: 1000; /* Higher z-index to ensure it appears above other elements */
  display: flex;
  flex-direction: column;
  /* Add important flags to ensure styles are applied */
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

._sidebarCollapsed_10tcp_72 {
  width: 0;
}

/* Right panel styles */
._rightPanel_10tcp_77, ._right-panel_10tcp_77 {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 10 !important;
  min-width: 0 !important; /* Allow content to shrink */
  max-width: 100% !important; /* Don't exceed container width */
  /* Removed height: 100% to allow proper grid resizing */
  background-color: var(--bg-surface-2) !important;
  border-left: 1px solid var(--border-color) !important;
  transition: width 0.3s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

._rightPanelCollapsed_10tcp_92 {
  width: 0;
}

._bottomPanel_10tcp_96 {
  height: 200px;
  background-color: var(--bg-medium);
  border-top: 1px solid var(--border-color);
  transition: height 0.2s ease;
  overflow: hidden;
}

._bottomPanelCollapsed_10tcp_104 {
  height: 0;
}

._resizer_10tcp_108 {
  position: absolute;
  background-color: transparent;
  z-index: 1001; /* Above everything */
  transition: background-color 0.2s ease;
}

._resizer_10tcp_108:hover {
  background-color: var(--primary);
}

._resizerVertical_10tcp_119 {
  width: 5px;
  height: 100%;
  cursor: col-resize;
}

._resizerHorizontal_10tcp_125 {
  height: 5px;
  width: 100%;
  cursor: row-resize;
}

._dropZone_10tcp_131 {
  position: absolute;
  background-color: var(--vscode-sash-hoverBorder);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 99;
}

._dropZone_10tcp_131:hover {
  opacity: 0.3;
}

._dropZoneTop_10tcp_143 {
  top: 0;
  left: 0;
  right: 0;
  height: 20%;
}

._dropZoneBottom_10tcp_150 {
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
}

._dropZoneLeft_10tcp_157 {
  left: 0;
  top: 0;
  bottom: 0;
  width: 20%;
}

._dropZoneRight_10tcp_164 {
  right: 0;
  top: 0;
  bottom: 0;
  width: 20%;
}

/* Light theme overrides */
:root[data-theme="light"] ._layout_10tcp_2 {
  background-color: var(--bg-darkest);
  color: var(--text-primary);
}

:root[data-theme="light"] ._mainContent_10tcp_42 {
  background-color: var(--bg-darker);
}

:root[data-theme="light"] ._sidebar_10tcp_55,
:root[data-theme="light"] ._rightPanel_10tcp_77,
:root[data-theme="light"] ._bottomPanel_10tcp_96 {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color);
}

:root[data-theme="light"] ._resizer_10tcp_108:hover {
  background-color: var(--vscode-sash-hoverBorder-light);
}

:root[data-theme="light"] ._dropZone_10tcp_131 {
  background-color: var(--vscode-sash-hoverBorder-light);
}

._es-resizer-vertical_10tcp_196 {
  position: relative !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 32px !important;
  cursor: col-resize !important;
  z-index: 10000 !important;
  flex-shrink: 0 !important;
}

._mainContentWrapper_10tcp_206, ._mainContentArea_10tcp_206, ._main-content-area_10tcp_206, ._main-content-wrapper_10tcp_206 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Voice Layout Flexbox Override - Modern Solution */
.voice-layout-flex {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
}/* SidebarBehavior.css - Improves sidebar behavior to push content instead of overlapping */

/* Main container that holds sidebar and content */
.main-area-with-sidebar {
  display: flex !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* Sidebar styling */
.sidebar {
  height: 100% !important;
  background-color: var(--bg-medium, #252526) !important;
  border-right: 1px solid var(--border-color, #444444) !important;
  transition: width 0.2s ease-out, opacity 0.2s ease-out !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Disable transitions during resize */
body.resizing .sidebar,
body.resizing-left-panel .sidebar,
body.resizing-right-panel .right-panel,
body.resizing .resizable-panel,
body.resizing .resizable-panel-content,
body.resizing .resizable-panel-content > *,
body.resizing .tool-panel-content,
body.resizing .main-content-wrapper,
body.resizing .main-area-with-sidebar,
body.resizing .main-content-area {
  transition: none !important;
}

/* Main content area that will be pushed by sidebar */
.main-content-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: var(--bg-darker, #1e1e1e) !important;
  transition: margin-left 0.3s ease !important;
}

/* Right panel styling removed - using the main implementation in RightPanel.css */

/* Resizer styling */
.resizer {
  position: absolute !important;
  background-color: transparent !important;
  z-index: 10000 !important;
  transition: background-color 0.2s ease !important;
}

.resizer:hover {
  background-color: var(--primary, rgba(0, 120, 212, 0.6)) !important;
}

.resizer.horizontal {
  width: 12px !important;
  height: 100% !important;
  cursor: col-resize !important;
}

.resizer.vertical {
  width: 100% !important;
  height: 12px !important;
  cursor: row-resize !important;
}

/* Make resizers more visible */
.resizable-panel-resizer {
  opacity: 0.7 !important;
}

.resizable-panel-resizer:hover {
  opacity: 1 !important;
  background-color: rgba(116, 199, 236, 0.7) !important;
}

/* Ensure panels are visible when they should be */
.panel-right.visible,
.panel-bottom.visible {
  transform: translate(0) !important;
  opacity: 1 !important;
  display: flex !important;
}

/* Media queries for responsive behavior */
@media (max-width: 768px) {
  .sidebar {
    position: absolute !important;
    z-index: 1000 !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2) !important;
  }

  .main-content-wrapper {
    margin-left: 0 !important;
  }
}
/* 
 * VoiceBarLayoutFix.css
 * Comprehensive fix for voice bar layout issues
 * Prevents tabs from being squished when voice bar appears
 */

/* Ensure layout container uses proper CSS Grid behavior */
.layout-container {
  /* Use CSS Grid for proper space allocation */
  display: grid !important;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;

  /* Prevent viewport issues on mobile */
  height: 100vh;
  height: -webkit-fill-available; /* Safari mobile fix */
  min-height: 100vh;
  min-height: -webkit-fill-available; /* Safari mobile fix */
}

/* Force proper height when voice bar is present */
.layout-container:has(.voice-bar-container) {
  grid-template-rows: auto 1fr auto !important;
}

.layout-container:has(.voice-bar-container) .middle-area {
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Middle area should trust CSS Grid for height */
.middle-area {
  /* Remove any conflicting height calculations */
  height: auto !important;
  max-height: none !important;
  min-height: 0;

  /* Ensure proper flex behavior */
  display: flex;
  overflow: hidden;
  position: relative;
}

/* WorkspaceManager should fill available space */
.workspaceManager {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden;
}

/* Voice bar container fixes */
.voice-bar-container {
  /* Ensure consistent height across all devices */
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  overflow: hidden;
  position: relative;
  z-index: var(--z-index-voice-bar, 90);
  
  /* Prevent any layout shifts */
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Tab container protection */
.tab-header-container,
.multi-tabs-view .tab-header-container {
  /* Ensure tabs remain visible and clickable */
  position: relative;
  z-index: var(--z-index-tabs, 40) !important;
  min-height: 35px;
  height: 35px;
  flex-shrink: 0;
  overflow: visible;
}

/* Content tabs manager protection */
.content-tabs-manager {
  /* Ensure proper height allocation */
  height: 100%;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  position: relative;
  z-index: var(--z-index-tabs, 40) !important;
}

/* Panel container should fill available space */
.panelContainer {
  height: 100% !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden;
}

/* Individual panels should fill available space */
.panel {
  height: 100% !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden;
}

/* Tab bar specific fixes */
.tabBar {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: var(--z-index-tabs, 40) !important;
  overflow: visible !important;
}

.tabBarContent {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.ungroupedTabs {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Tab content area fixes */
.tab-content,
.tab-scrollable-content-area {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Voice channel room specific fixes */
.voice-channel-room {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure all content containers respect height constraints */
.tab-content.active {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Fix for any content that might be overflowing */
.tab-content.active > * {
  max-height: 100%;
  overflow: hidden;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  .layout-container {
    /* Mobile viewport fixes */
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  .voice-bar-container {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  /* Ensure tabs remain accessible on mobile */
  .tab-header-container,
  .tabBar {
    min-height: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
    touch-action: manipulation; /* Improve touch responsiveness */
  }

  .tab-item,
  .tab {
    /* Ensure tabs are large enough for touch */
    min-height: 35px !important;
    min-width: 50px;
  }

  /* Ensure workspace components adapt to mobile */
  .workspaceManager,
  .panelContainer,
  .panel {
    height: 100% !important;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .voice-bar-container {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }
  
  .tab-header-container {
    min-height: 32px;
    height: 32px;
  }
  
  .tab-item {
    min-height: 32px;
    min-width: 40px;
  }
}

/* Prevent 100vh issues on mobile browsers */
@supports (-webkit-touch-callout: none) {
  .layout-container {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .voice-bar-container {
    border-top: 2px solid;
  }
  
  .tab-header-container {
    border-bottom: 2px solid;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .layout-container {
    transition: none !important;
  }
  
  .voice-bar-container {
    transition: none !important;
  }
}

/* Focus management for accessibility */
.tab-item:focus-visible {
  outline: 2px solid var(--primary, #ff7b00);
  outline-offset: 2px;
  z-index: calc(var(--z-index-tabs, 40) + 1);
}

/* Ensure voice bar doesn't interfere with tab interactions */
.global-voice-bar {
  pointer-events: auto;
  position: relative;
  z-index: var(--z-index-voice-bar, 90);
}

.global-voice-bar * {
  pointer-events: auto;
}

/* Prevent any overflow issues */
.main-area-with-sidebar {
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

/* Ensure proper stacking context */
.layout-container > * {
  position: relative;
}

/* Debug helper (remove in production) */
.layout-container[data-debug="true"] {
  /* outline: 2px solid red; */ /* Removed red outline */
}

.layout-container[data-debug="true"] .middle-area {
  /* outline: 2px solid blue; */ /* Removed blue outline */
}

.layout-container[data-debug="true"] .voice-bar-container {
  /* outline: 2px solid green; */ /* Removed green outline */
}

.layout-container[data-debug="true"] .workspaceManager {
  /* outline: 2px solid orange; */ /* Removed orange outline */
}

.layout-container[data-debug="true"] .tabBar {
  /* outline: 2px solid purple; */ /* Removed purple outline */
}

/* Force visibility for debugging */
.voice-bar-layout-debug .tabBar,
.voice-bar-layout-debug .tab-header-container {
  /* background-color: rgba(255, 0, 0, 0.1) !important; */ /* Removed red background */
  /* border: 2px solid red !important; */ /* Removed red border */
  min-height: 35px !important;
  height: 35px !important;
  max-height: 35px !important;
  position: relative !important;
  z-index: 1000 !important;
  flex-shrink: 0 !important;
}

/* Emergency fix: Force tabs to stay visible */
.layout-container .tabBar,
.layout-container .tab-header-container {
  position: relative !important;
  z-index: var(--z-index-tabs, 40) !important;
  min-height: 35px !important;
  height: 35px !important;
  max-height: 35px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* Ensure tab content doesn't overflow and push tabs out */
.layout-container .tab-scrollable-content-area,
.layout-container .tab-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.app {
  width: 100%;
  /* Removed height: 100vh to allow proper grid resizing */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Keep app overflow hidden, let children handle scrolling */
  min-height: 100vh; /* Use min-height instead of fixed height */
}

.app-container {
  width: 100%;
  /* Removed height: 100% to allow proper grid resizing */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Keep app container overflow hidden, let children handle scrolling */
  flex: 1 1 auto; /* Allow growing and shrinking */
  min-height: 0; /* Allow shrinking below natural height */
}

/* Container for route components to prevent duplicate rendering */
.route-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto; /* Allow scrolling when needed */
  position: relative;
  z-index: 5; /* Ensure it's above any potential duplicate renders */
}

/* Set the global font and base styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global focus styles - Managed by index.css */
/* Removed to prevent conflicts with comprehensive focus management */

/* Scroll bar customization for webkit browsers */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track, rgba(0, 0, 0, 0.1));
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.3));
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.5));
}

/* Firefox scrollbar customization */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.3)) var(--scrollbar-track, rgba(0, 0, 0, 0.1));
}

/* Light theme overrides */
:root[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--light-scrollbar-track, rgba(0, 0, 0, 0.05));
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--light-scrollbar-thumb, rgba(0, 0, 0, 0.2));
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--light-scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
}

:root[data-theme="light"] * {
  scrollbar-color: var(--light-scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--light-scrollbar-track, rgba(0, 0, 0, 0.05));
}/* ThemeFix.css - Comprehensive theming fixes for dark/light mode */

/* ===== DROPDOWN MENU FIXES ===== */
/* Ensure all dropdown menus are visible in dark theme */
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] [class*="dropdown"],
:root[data-theme="dark"] [class*="menu"],
.dark-theme .dropdown-menu,
.dark-theme [class*="dropdown"],
.dark-theme [class*="menu"] {
  background: var(--bg-darker, #252526) !important;
  border: 1px solid var(--border-color, #3c3c3c) !important;
  color: var(--text-primary, #ffffff) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="dark"] .dropdown-item,
:root[data-theme="dark"] [class*="dropdown"] [class*="item"],
:root[data-theme="dark"] [class*="menu"] [class*="item"],
.dark-theme .dropdown-item,
.dark-theme [class*="dropdown"] [class*="item"],
.dark-theme [class*="menu"] [class*="item"] {
  color: var(--text-primary, #ffffff) !important;
  background: transparent !important;
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] [class*="dropdown"] [class*="item"]:hover,
:root[data-theme="dark"] [class*="menu"] [class*="item"]:hover,
.dark-theme .dropdown-item:hover,
.dark-theme [class*="dropdown"] [class*="item"]:hover,
.dark-theme [class*="menu"] [class*="item"]:hover {
  background: var(--bg-hover, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
}

/* Light theme dropdown fixes */
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] [class*="dropdown"],
:root[data-theme="light"] [class*="menu"],
.light-theme .dropdown-menu,
.light-theme [class*="dropdown"],
.light-theme [class*="menu"] {
  background: var(--bg-light, #ffffff) !important;
  border: 1px solid var(--border-color, #e0e0e0) !important;
  color: var(--text-primary, #000000) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .dropdown-item,
:root[data-theme="light"] [class*="dropdown"] [class*="item"],
:root[data-theme="light"] [class*="menu"] [class*="item"],
.light-theme .dropdown-item,
.light-theme [class*="dropdown"] [class*="item"],
.light-theme [class*="menu"] [class*="item"] {
  color: var(--text-primary, #000000) !important;
  background: transparent !important;
}

:root[data-theme="light"] .dropdown-item:hover,
:root[data-theme="light"] [class*="dropdown"] [class*="item"]:hover,
:root[data-theme="light"] [class*="menu"] [class*="item"]:hover,
.light-theme .dropdown-item:hover,
.light-theme [class*="dropdown"] [class*="item"]:hover,
.light-theme [class*="menu"] [class*="item"]:hover {
  background: var(--bg-hover, #f0f0f0) !important;
  color: var(--text-primary, #000000) !important;
}

/* ===== WORKSPACE THEMING ===== */
.workspaceManager {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
}

.panelContainer {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.panel {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.main-content {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
}

.main-content-wrapper {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
}

/* ===== WORKSPACE TABS THEMING ===== */
.tab-header-container {
  background-color: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.tabs-list {
  background-color: var(--bg-surface-2) !important;
}

.tab-item {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border-right: 1px solid var(--border-primary) !important;
  border-left: 1px solid var(--border-primary) !important;
}

.tab-item.active {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--primary) !important;
}

.tab-item:hover:not(.active) {
  background-color: var(--bg-surface-3) !important;
}

.tab-close-button {
  color: var(--text-secondary) !important;
}

.tab-close-button:hover {
  background-color: var(--bg-danger) !important;
  color: var(--text-on-primary) !important;
}

.tab-scroll-button {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-primary) !important;
}

.tab-scroll-button:hover:not(:disabled) {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
}

.tab-scroll-button:disabled {
  color: var(--text-disabled) !important;
  background-color: var(--bg-surface-2) !important;
}

/* ===== TAB BUTTON UNIVERSAL FIXES ===== */
/* Fix all tab buttons to use proper theming */
:root[data-theme="light"] .tab-button,
:root[data-theme="light"] .nav-button,
:root[data-theme="light"] .mode-button,
:root[data-theme="light"] .media-type-btn,
:root[data-theme="light"] .enhancement-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #6b7280 !important;
}

:root[data-theme="light"] .tab-button:hover,
:root[data-theme="light"] .nav-button:hover,
:root[data-theme="light"] .mode-button:hover,
:root[data-theme="light"] .media-type-btn:hover,
:root[data-theme="light"] .enhancement-btn:hover {
  background: rgba(255, 123, 0, 0.1) !important;
  color: var(--primary, #ff7b00) !important;
  border-color: var(--primary, #ff7b00) !important;
}

:root[data-theme="light"] .tab-button.active,
:root[data-theme="light"] .nav-button.active,
:root[data-theme="light"] .mode-button.active,
:root[data-theme="light"] .media-type-btn.active,
:root[data-theme="light"] .enhancement-btn.active {
  background: var(--primary, #ff7b00) !important;
  color: #ffffff !important;
  border-color: var(--primary, #ff7b00) !important;
  box-shadow: 0 2px 4px rgba(255, 123, 0, 0.3) !important;
}

/* Fix any remaining dark backgrounds in light mode */
:root[data-theme="light"] .media-mode-toggle,
:root[data-theme="light"] .tab-navigation,
:root[data-theme="light"] .media-type-selector {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ===== EXPLORER HEADERS UNIVERSAL FIX ===== */
/* Fix all explorer headers to be readable in light mode */
:root[data-theme="light"] .explorer-header,
:root[data-theme="light"] .block-explorer-header,
:root[data-theme="light"] .workflow-explorer-header,
:root[data-theme="light"] .asset-explorer-header,
:root[data-theme="light"] .content-explorer-header {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1a1a1a !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .explorer-header .title,
:root[data-theme="light"] .explorer-header h1,
:root[data-theme="light"] .explorer-header h2,
:root[data-theme="light"] .explorer-header h3,
:root[data-theme="light"] .block-explorer-header .title,
:root[data-theme="light"] .block-explorer-header h1,
:root[data-theme="light"] .block-explorer-header h2,
:root[data-theme="light"] .block-explorer-header h3,
:root[data-theme="light"] .workflow-explorer-header .title,
:root[data-theme="light"] .workflow-explorer-header h1,
:root[data-theme="light"] .workflow-explorer-header h2,
:root[data-theme="light"] .workflow-explorer-header h3,
:root[data-theme="light"] .asset-explorer-header .title,
:root[data-theme="light"] .asset-explorer-header h1,
:root[data-theme="light"] .asset-explorer-header h2,
:root[data-theme="light"] .asset-explorer-header h3,
:root[data-theme="light"] .content-explorer-header .title,
:root[data-theme="light"] .content-explorer-header h1,
:root[data-theme="light"] .content-explorer-header h2,
:root[data-theme="light"] .content-explorer-header h3 {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .explorer-header .icon,
:root[data-theme="light"] .block-explorer-header .icon,
:root[data-theme="light"] .workflow-explorer-header .icon,
:root[data-theme="light"] .asset-explorer-header .icon,
:root[data-theme="light"] .content-explorer-header .icon {
  color: var(--primary, #ff7b00) !important;
}

/* ===== RIGHT PANEL THEMING ===== */
.right-panel {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-left: 1px solid var(--border-primary) !important;
}

.right-panel-header {
  background-color: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.right-panel-content {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}

.right-panel-resize-handle {
  background-color: transparent !important;
}

.right-panel-resize-handle:hover {
  background-color: var(--primary) !important;
}

/* ===== RIGHT PANEL TABS THEMING ===== */
.right-panel-tabs {
  background-color: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.panel-tab {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-secondary) !important;
  border: none !important;
  margin-right: 4px !important;
  padding: 6px 12px !important;
  border-radius: 4px 4px 0 0 !important;
}

.panel-tab.active {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--primary) !important;
}

.panel-tab:hover:not(.active) {
  background-color: var(--bg-surface-4) !important;
}

.panel-action-button {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border: none !important;
}

.panel-action-button:hover {
  background-color: var(--bg-danger) !important;
  color: var(--text-on-primary) !important;
}

/* ===== CHAT PANEL THEMING ===== */
.chat-container,
.omni-chat-container {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
}

.chat-messages,
.omni-chat-messages {
  background-color: var(--bg-surface-1) !important;
}

.chat-message,
.omni-chat-message {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

.chat-message.user,
.omni-chat-message.user {
  background-color: var(--bg-surface-3) !important;
}

.chat-input-container,
.omni-chat-input-container {
  background-color: var(--bg-surface-2) !important;
  border-top: 1px solid var(--border-primary) !important;
}

.chat-input,
.omni-chat-input,
.omni-chat-textarea {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

.chat-send-button,
.omni-chat-send-button {
  background-color: var(--primary) !important;
  color: var(--text-on-primary) !important;
}

.chat-send-button:hover,
.omni-chat-send-button:hover {
  background-color: var(--primary-dark) !important;
}

/* Chat message content */
.message-content,
.omni-chat-message-content {
  color: var(--text-primary) !important;
}

/* Chat message metadata */
.message-metadata,
.omni-chat-message-metadata {
  color: var(--text-secondary) !important;
}

/* Chat message code blocks */
.message-content pre,
.omni-chat-message-content pre {
  background-color: var(--bg-surface-3) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}

/* Chat message code inline */
.message-content code,
.omni-chat-message-content code {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
}

/* ===== SIDEBAR THEMING ===== */
.sidebar {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-right: 1px solid var(--border-primary) !important;
}

.sidebar-item {
  color: var(--text-secondary) !important;
}

.sidebar-item:hover {
  background-color: var(--bg-surface-3) !important;
}

.sidebar-item.active {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* ===== ACTIVITY BAR THEMING ===== */
.activity-bar {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-secondary) !important;
  border-right: 1px solid var(--border-primary) !important;
}

.activity-bar-item {
  color: var(--text-secondary) !important;
}

.activity-bar-item:hover {
  background-color: var(--bg-surface-4) !important;
}

.activity-bar-item.active {
  color: var(--primary) !important;
  background-color: var(--primary-light) !important;
}

/* ===== FILE SEARCH BAR THEMING ===== */
.search-bar,
.file-search-bar,
.search-input-container {
  background-color: var(--bg-surface-2) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.search-input,
.file-search-input {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

.search-button,
.file-search-button {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-primary) !important;
}

.search-button:hover,
.file-search-button:hover {
  background-color: var(--bg-surface-4) !important;
  color: var(--text-primary) !important;
}

.search-results,
.file-search-results {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

.search-result-item,
.file-search-result-item {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.search-result-item:hover,
.file-search-result-item:hover {
  background-color: var(--bg-surface-2) !important;
}

/* ===== TOOLS PANEL THEMING ===== */
.tools-panel {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}

.tools-section {
  border-bottom: 1px solid var(--border-primary) !important;
}

.tools-section h4 {
  color: var(--text-secondary) !important;
}

.tool-button {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

.tool-button:hover {
  background-color: var(--primary) !important;
  color: var(--text-on-primary) !important;
}

.tool-icon {
  color: var(--text-secondary) !important;
}

/* ===== HISTORY PANEL THEMING ===== */
.history-panel {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}

.history-filters {
  border-bottom: 1px solid var(--border-primary) !important;
}

.history-filter {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid transparent !important;
}

.history-filter:hover {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
}

.history-filter.active {
  background-color: var(--bg-surface-3) !important;
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary) !important;
}

.history-item {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.history-item:hover {
  background-color: var(--bg-surface-3) !important;
}

.history-title {
  color: var(--text-primary) !important;
}

.history-time {
  color: var(--text-secondary) !important;
}

/* ===== CONTEXT PANEL THEMING ===== */
.context-panel {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}

.context-section h4 {
  color: var(--text-secondary) !important;
}

.context-item {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.context-item:hover {
  background-color: var(--bg-surface-3) !important;
}

.context-icon {
  color: var(--text-secondary) !important;
}

.context-label {
  color: var(--text-primary) !important;
}
.toast-system-container {
  position: fixed;
  top: 80px; /* Moved down to avoid header overlap */
  right: 24px;
  z-index: var(--z-index-toast, 9998);
  display: flex;
  flex-direction: column;
  gap: 16px; /* Increased gap for better spacing */
  max-width: 420px; /* Slightly wider for better content */
  width: 100%;
  pointer-events: none;
}

/* Remove focus outlines from toast elements */
.toast-item:focus,
.toast-close:focus,
.toast-action:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Fix user avatar circles in toast notifications */
.toast-icon {
  border-radius: 50% !important;
  overflow: hidden;
}

.toast-icon svg {
  border-radius: 50% !important;
}

/* Remove any square borders from user avatars */
.toast-item .user-avatar,
.toast-item .avatar,
.toast-item .profile-picture {
  border-radius: 50% !important;
  border: none !important;
  outline: none !important;
}

/* Mobile responsive positioning */
@media (max-width: 768px) {
  .toast-system-container {
    top: 60px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .toast-system-container {
    top: 50px;
    right: 12px;
    left: 12px;
  }
}

.toast-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px; /* Slightly smaller radius for modern look */
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.25),
    0 8px 16px -4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-left: 4px solid var(--primary, #8b5cf6);
  overflow: hidden;
  pointer-events: auto;
  animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(24px);
  min-height: 64px;
  position: relative;
}

.toast-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px -5px rgba(255, 123, 0, 0.3), 0 10px 20px -5px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 123, 0, 0.3);
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) translateY(-20px) scale(0.9);
    filter: blur(4px);
  }
  60% {
    opacity: 0.8;
    transform: translateX(-8px) translateY(0) scale(1.02);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Toast type specific styling */
.toast-workflow-start,
.toast-workflow-progress {
  border-left-color: var(--primary, #007acc);
}

/* Message notification styling - Apply to info toasts with MessageCircle icon */
.toast-info:has(.toast-icon svg[data-lucide="message-circle"]) {
  border-left-color: #10b981 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%) !important;
}

.toast-info:has(.toast-icon svg[data-lucide="message-circle"]) .toast-icon {
  color: #10b981 !important;
}

.toast-info:has(.toast-icon svg[data-lucide="message-circle"]):hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.06) 100%) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 25px 50px -12px rgba(16, 185, 129, 0.25),
    0 12px 24px -4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.toast-workflow-complete,
.toast-success {
  border-left-color: var(--success, #28a745);
}

.toast-workflow-error,
.toast-error {
  border-left-color: var(--error, #dc3545);
}

.toast-workflow-cancelled,
.toast-warning {
  border-left-color: var(--warning, #ffc107);
}

.toast-file-upload,
.toast-file-process,
.toast-info {
  border-left-color: var(--info, #17a2b8);
}

/* Content layout */
.toast-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Action buttons */
.toast-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

.toast-action {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.toast-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.toast-action.primary {
  background: var(--primary, #007acc);
  color: white;
}

.toast-action.primary:hover:not(:disabled) {
  background: var(--primary-hover, #005a9e);
}

.toast-action.secondary {
  background: var(--bg-surface-3, #f5f5f5);
  color: var(--text-secondary, #666);
  border: 1px solid var(--border-color, #ddd);
}

.toast-action.secondary:hover:not(:disabled) {
  background: var(--bg-surface-4, #e5e5e5);
}

.toast-action.danger {
  background: var(--error, #dc3545);
  color: white;
}

.toast-action.danger:hover:not(:disabled) {
  background: var(--error-hover, #c82333);
}

.toast-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.toast-text {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary, #f8f8f2);
  margin-bottom: 4px;
}

.toast-message {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary, #a1a1aa);
  white-space: pre-line;
  word-wrap: break-word;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-secondary, #a1a1aa);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-top: -2px;
}

.toast-close:hover {
  background: var(--bg-surface-3, #3c3c3c);
  color: var(--text-primary, #f8f8f2);
}

/* Progress bar */
.toast-progress-container {
  width: 100%;
  height: 4px;
  background: var(--bg-surface-3, #3c3c3c);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.toast-progress-bar {
  height: 100%;
  background: var(--primary, #007acc);
  border-radius: 2px;
  transition: width 0.3s ease;
  min-width: 2px;
}

/* Theme variations */
.toast-light {
  background: var(--bg-surface-2-light, #f8f9fa);
  color: var(--text-primary-light, #333333);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.05);
}

.toast-light .toast-title {
  color: var(--text-primary-light, #333333);
}

.toast-light .toast-message {
  color: var(--text-secondary-light, #6c757d);
}

.toast-light .toast-close {
  color: var(--text-secondary-light, #6c757d);
}

.toast-light .toast-close:hover {
  background: var(--bg-surface-3-light, #e9ecef);
  color: var(--text-primary-light, #333333);
}

.toast-light .toast-progress-container {
  background: var(--bg-surface-3-light, #e9ecef);
}

/* Spinning animation for progress indicators */
.animate-spin-persistent {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 🆕 Creator-specific toast styling */
.creator-icon {
  color: var(--color-orange-500, #f97316) !important;
  filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.3));
}

.toast-creator-workflow-start {
  border-left: 4px solid var(--color-orange-500, #f97316);
  background: linear-gradient(135deg,
    rgba(249, 115, 22, 0.1) 0%,
    rgba(249, 115, 22, 0.05) 100%);
}

.toast-creator-workflow-progress {
  border-left: 4px solid var(--color-orange-500, #f97316);
  background: linear-gradient(135deg,
    rgba(249, 115, 22, 0.15) 0%,
    rgba(249, 115, 22, 0.08) 100%);
  animation: creator-pulse 2s ease-in-out infinite;
}

.toast-creator-workflow-complete {
  border-left: 4px solid var(--color-green-500, #10b981);
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(249, 115, 22, 0.05) 100%);
}

.toast-creator-workflow-error {
  border-left: 4px solid var(--color-red-500, #ef4444);
  background: linear-gradient(135deg,
    rgba(239, 68, 68, 0.1) 0%,
    rgba(249, 115, 22, 0.05) 100%);
}

@keyframes creator-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(249, 115, 22, 0);
  }
}

/* Creator toast content enhancements */
.toast-creator-workflow-start .toast-title,
.toast-creator-workflow-progress .toast-title,
.toast-creator-workflow-complete .toast-title,
.toast-creator-workflow-error .toast-title {
  font-weight: 600;
  color: var(--color-orange-600, #ea580c);
}

.toast-creator-workflow-complete .toast-title {
  color: var(--color-green-600, #059669);
}

.toast-creator-workflow-error .toast-title {
  color: var(--color-red-600, #dc2626);
}

/* Responsive design */
@media (max-width: 480px) {
  .toast-system-container {
    left: 20px;
    right: 20px;
    max-width: none;
  }
  
  .toast-item {
    margin: 0;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .toast-item {
    animation: none;
  }
  
  .animate-spin-persistent {
    animation: none;
  }
  
  .toast-progress-bar {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .toast-item {
    border: 2px solid;
    border-left-width: 6px;
  }

  .toast-progress-bar {
    border: 1px solid;
  }
}

/* Enhanced Light theme support with glassmorphism */
[data-theme="light"] .toast-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-left: 4px solid var(--primary, #ff7b00);
}

[data-theme="light"] .toast-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%);
  border-color: rgba(255, 123, 0, 0.2);
  box-shadow: 0 20px 40px -5px rgba(255, 123, 0, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .toast-title {
  color: #1a1a1a;
}

[data-theme="light"] .toast-message {
  color: #6b7280;
}

[data-theme="light"] .toast-close {
  color: #6b7280;
}

[data-theme="light"] .toast-close:hover {
  background: rgba(255, 123, 0, 0.1);
  color: var(--primary, #ff7b00);
}
/**
 * Enhanced Workflow Execution Modal - Modern 2025 UX
 * Professional execution interface with spring animations
 */

.workflow-execution-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%),
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(20px);
  /* Modern entrance animation */
  animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Performance optimization */
  will-change: opacity, backdrop-filter;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.workflow-execution-modal {
  width: 90vw;
  max-width: 640px;
  max-height: 85vh;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-radius: 24px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  position: relative;
  /* Spring physics animation */
  animation: modalSpringIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Performance optimization */
  will-change: transform, opacity;
}

/* Modern spring entrance animation */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Animated background pattern */
.workflow-execution-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.workflow-execution-modal > * {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .workflow-execution-modal {
  background:
    linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .workflow-execution-modal::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

[data-theme="dark"] .modal-header {
  border-bottom: 1px solid #374151;
  background: #111827;
}

.modal-title-section h2 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
}

[data-theme="dark"] .modal-title-section h2 {
  color: white;
}

.modal-title-section p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

[data-theme="dark"] .modal-title-section p {
  color: #9ca3af;
}

.modal-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

[data-theme="dark"] .modal-subtitle {
  color: #9ca3af;
}

.close-button,
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-button:hover,
.modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}

[data-theme="dark"] .close-button,
[data-theme="dark"] .modal-close {
  color: #9ca3af;
}

[data-theme="dark"] .close-button:hover,
[data-theme="dark"] .modal-close:hover {
  background: #374151;
  color: white;
}

.modal-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Input Step */
.inputs-step h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 20px 0;
}

.input-section {
  margin-bottom: 24px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.file-upload-area {
  position: relative;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-upload-area:hover {
  border-color: var(--accent-color);
  background: var(--bg-secondary);
}

.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-placeholder {
  color: var(--text-secondary);
  font-size: 14px;
}

.file-selected {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-primary);
}

.file-size {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Execution Step */
.execution-step-container h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 20px 0;
}

.execution-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.execution-step {
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.execution-step.running {
  border-color: var(--accent-color);
  background: var(--accent-color-light);
}

.execution-step.completed {
  border-color: var(--success-color);
  background: var(--success-color-light);
}

.execution-step.error {
  border-color: var(--error-color);
  background: var(--error-color-light);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.status-icon {
  flex-shrink: 0;
}

.status-icon.completed {
  color: var(--success-color);
}

.status-icon.running {
  color: var(--accent-color);
  animation: pulse 1.5s infinite;
}

.status-icon.error {
  color: var(--error-color);
}

.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}

.status-dot.pending {
  background: var(--text-tertiary);
}

.step-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.step-progress {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.step-error {
  font-size: 12px;
  color: var(--error-color);
  margin-top: 8px;
  padding: 8px;
  background: var(--error-color-light);
  border-radius: 4px;
}

/* Results Step */
.results-step h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--success-color);
  margin: 0 0 20px 0;
}

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

.result-item {
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.result-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.result-item p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Footer */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.cancel-button,
.run-button,
.done-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.cancel-button {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cancel-button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.run-button {
  background: var(--accent-color);
  color: white;
}

.run-button:hover:not(:disabled) {
  background: var(--accent-color-dark);
}

.run-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.done-button {
  background: var(--success-color);
  color: white;
}

.done-button:hover {
  background: var(--success-color-dark);
}

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Responsive design */
@media (max-width: 768px) {
  .workflow-execution-modal {
    width: 95vw;
    max-height: 90vh;
  }
  
  .modal-header {
    padding: 20px;
  }
  
  .modal-content {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 16px 20px;
  }
  
  .modal-title-section h2 {
    font-size: 18px;
  }
}

/* Enhanced Results Section */
.results-section {
  margin-top: 16px;
  padding: 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
}

.results-section h4 {
  margin: 0 0 12px 0;
  color: #10b981;
  font-size: 16px;
  font-weight: 600;
}

.results-summary {
  margin: 0 0 16px 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.created-items {
  margin-bottom: 16px;
}

.created-items h5 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.item-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.item-type,
.item-path {
  font-size: 12px;
  color: var(--text-secondary);
}

.item-action {
  padding: 6px 12px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.item-action:hover {
  background: var(--accent-color-hover);
}

.execution-stats {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-secondary);
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* Enhanced Error Section */
.error-section {
  margin-top: 16px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
}

.error-section h4 {
  margin: 0 0 8px 0;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
}

.error-message {
  color: #ef4444;
  font-size: 13px;
  line-height: 1.4;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  white-space: pre-wrap;
}
/* Enhanced Workflow Results Modal - Modern 2025 UX */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(20px);
  /* Modern entrance animation */
  animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Performance optimization */
  will-change: opacity, backdrop-filter;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.modal-content {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-radius: 24px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  position: relative;
  /* Spring physics animation */
  animation: modalSpringIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Performance optimization */
  will-change: transform, opacity;
}

/* Spring physics animation */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Animated background pattern */
.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 120, 212, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.modal-content > * {
  position: relative;
  z-index: 1;
}

.workflow-results-modal {
  width: 840px;
  height: 640px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  backdrop-filter: blur(10px);
  position: relative;
  /* Staggered entrance animation */
  animation: headerSlideIn 0.5s ease-out 0.2s both;
}

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

/* Header shimmer effect */
.modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
  animation: headerShimmer 3s ease-in-out infinite;
}

@keyframes headerShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  color: var(--text-secondary, #6c757d);
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--bg-surface-3, #f0f1f3);
  color: var(--text-primary, #2c3e50);
}

.modal-tabs {
  display: flex;
  background: var(--bg-surface-2, #f8f9fa);
  border-bottom: 1px solid var(--border-color, #e1e5e9);
}

.tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #6c757d);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
}

.tab:hover {
  background: var(--bg-surface-3, #f0f1f3);
  color: var(--text-primary, #2c3e50);
}

.tab.active {
  background: var(--bg-surface-1, #ffffff);
  color: var(--primary, #007acc);
  border-bottom-color: var(--primary, #007acc);
}

.modal-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.results-tab-content {
  height: 100%;
}

/* Enhanced Results Viewer Styles */
.results-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.results-card {
  background: var(--bg-surface-2, #f8f9fa);
  border: 1px solid var(--border-color, #e1e5e9);
  border-radius: 8px;
  overflow: hidden;
}

.results-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-surface-3, #f0f1f3);
  border-bottom: 1px solid var(--border-color, #e1e5e9);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #2c3e50);
}

.results-card-content {
  padding: 16px;
}

.results-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.results-info-row:last-child {
  margin-bottom: 0;
}

.results-info-row .label {
  font-weight: 500;
  color: var(--text-secondary, #6c757d);
  font-size: 13px;
}

.results-info-row .value {
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  font-size: 13px;
}

.status-value {
  display: flex;
  align-items: center;
  gap: 6px;
}

.results-summary-text {
  margin-bottom: 16px;
  color: var(--text-primary, #2c3e50);
  font-size: 14px;
  line-height: 1.5;
}

.results-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: var(--bg-surface-1, #ffffff);
  border: 1px solid var(--border-color, #e1e5e9);
  border-radius: 6px;
  min-width: 80px;
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary, #007acc);
  margin-bottom: 4px;
}

.metric-label {
  font-size: 11px;
  color: var(--text-secondary, #6c757d);
  text-align: center;
  font-weight: 500;
}

.blocks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.block-item {
  background: var(--bg-surface-2, #f8f9fa);
  border: 1px solid var(--border-color, #e1e5e9);
  border-radius: 8px;
  overflow: hidden;
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-surface-3, #f0f1f3);
  border-bottom: 1px solid var(--border-color, #e1e5e9);
}

.block-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.block-type {
  background: var(--primary, #007acc);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.block-name {
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  font-size: 14px;
}

.block-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.laughter-score {
  background: var(--success, #28a745);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.block-action-btn {
  background: none;
  border: 1px solid var(--border-color, #e1e5e9);
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary, #6c757d);
  transition: all 0.2s;
}

.block-action-btn:hover {
  background: var(--bg-surface-1, #ffffff);
  color: var(--text-primary, #2c3e50);
}

.block-content {
  padding: 16px;
  color: var(--text-primary, #2c3e50);
  font-size: 13px;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
}

/* Enhanced Block Explorer-style Blocks List */
.enhanced-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-primary, #ffffff);
  border-radius: var(--radius-md, 8px);
}

.enhanced-block-item {
  display: flex;
  align-items: center;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 60px;
}

.enhanced-block-item:hover {
  background: var(--bg-tertiary, #f0f1f3);
  border-color: var(--border-color, #e1e5e9);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.enhanced-block-item:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.enhanced-block-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  width: 100%;
  min-width: 0;
}

.block-icon-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.block-icon {
  color: var(--text-secondary, #6c757d);
  transition: color 0.2s ease;
}

.enhanced-block-item:hover .block-icon {
  color: var(--accent-primary, #007acc);
}

.block-main-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.block-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}

.block-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  margin: 0;
  truncate: true;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.block-type-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.block-type-badge.joke {
  background: var(--success-color-alpha, rgba(40, 167, 69, 0.1));
  color: var(--success-color, #28a745);
}

.block-type-badge.comedy-bit {
  background: var(--primary-color-alpha, rgba(0, 122, 204, 0.1));
  color: var(--primary-color, #007acc);
}

.block-type-badge.comedy-set {
  background: var(--accent-color-alpha, rgba(138, 43, 226, 0.1));
  color: var(--accent-color, #8a2be2);
}

.block-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #6c757d);
}

.block-content-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.laughter-score-badge {
  background: var(--success-color, #28a745);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.block-actions-section {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.enhanced-block-item:hover .block-actions-section {
  opacity: 1;
}

.block-actions-section .block-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-color, #e1e5e9);
  border-radius: 0.25rem;
  background: var(--bg-primary, #ffffff);
  color: var(--text-secondary, #6c757d);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.block-actions-section .block-action-btn:hover {
  background: var(--accent-bg, #f0f8ff);
  color: var(--accent-primary, #007acc);
  border-color: var(--accent-color, #007acc);
  transform: scale(1.05);
}

.block-actions-section .block-action-btn:active {
  transform: scale(0.95);
}

.block-actions-section .copy-btn:hover {
  background: var(--info-bg, #e7f3ff);
  color: var(--info-color, #0066cc);
  border-color: var(--info-color, #0066cc);
}

.block-actions-section .open-btn:hover {
  background: var(--success-bg, #e8f5e8);
  color: var(--success-color, #28a745);
  border-color: var(--success-color, #28a745);
}

.details-section {
  margin-bottom: 24px;
}

.details-section h4 {
  margin-bottom: 12px;
  color: var(--text-primary, #2c3e50);
  font-size: 16px;
  font-weight: 600;
}

.details-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-surface-2, #f8f9fa);
  border-radius: 6px;
}

.detail-item.error {
  background: var(--error-light, #f8d7da);
  border: 1px solid var(--error, #dc3545);
}

.detail-label {
  font-weight: 600;
  color: var(--text-secondary, #6c757d);
  font-size: 13px;
  min-width: 120px;
}

.detail-value {
  flex: 1;
  color: var(--text-primary, #2c3e50);
  font-size: 13px;
  font-family: monospace;
}

.json-output {
  background: var(--bg-surface-1, #ffffff);
  border: 1px solid var(--border-color, #e1e5e9);
  border-radius: 6px;
  padding: 16px;
  font-family: monospace;
  font-size: 12px;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

.no-data {
  text-align: center;
  color: var(--text-secondary, #6c757d);
  font-style: italic;
  padding: 40px;
}

/* Responsive design */
@media (max-width: 768px) {
  .workflow-results-modal {
    width: 95vw;
    height: 90vh;
    margin: 5vh auto;
  }

  .results-summary-grid {
    grid-template-columns: 1fr;
  }

  .modal-tabs {
    flex-wrap: wrap;
  }

  .tab {
    flex: 1;
    min-width: 100px;
  }

  .results-metrics {
    justify-content: center;
  }

  .block-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .block-actions {
    align-self: flex-end;
  }

  /* Enhanced blocks responsive */
  .enhanced-block-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .block-title-row {
    width: 100%;
    justify-content: space-between;
  }

  .block-meta-row {
    width: 100%;
    justify-content: space-between;
  }

  .block-actions-section {
    opacity: 1; /* Always show on mobile */
    align-self: flex-end;
    margin-top: 0.25rem;
  }

  .enhanced-block-item {
    min-height: auto;
  }
}

/* Hierarchical Block Tree Styles */
.created-blocks-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.block-tree-node {
  display: flex;
  flex-direction: column;
}

.block-item-level-0 {
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important;
  border: 2px solid #4a90e2 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.block-item-level-0 h4 {
  color: #4a90e2 !important;
  font-size: 1rem !important;
}

.block-item-level-0 span {
  background: #4a90e2 !important;
  color: white !important;
  font-weight: 500 !important;
}

.block-item-level-1 {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%) !important;
  border: 1px solid #4a90e2 !important;
  border-left: 4px solid #4a90e2 !important;
  font-weight: 500 !important;
}

.block-item-level-1 h4 {
  color: #2c5aa0 !important;
}

.block-item-level-1 span {
  background: #4a90e2 !important;
  color: white !important;
}

.block-item-level-2 {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 1px solid #7bb3f0 !important;
  border-left: 3px solid #7bb3f0 !important;
  font-weight: 400 !important;
}

.block-item-level-2 h4 {
  color: #495057 !important;
  font-style: italic !important;
  font-size: 0.9em !important;
}

.block-item-level-2 span {
  background: #7bb3f0 !important;
  color: white !important;
}

.expand-chevron {
  transition: all 0.2s ease;
  color: #666;
}

.expand-chevron:hover {
  background: #e0e0e0 !important;
  color: #333;
  transform: scale(1.1);
}

.block-children {
  margin-top: 8px;
  animation: slideDown 0.2s ease-out;
}

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

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-content,
  .modal-header,
  .enhanced-block-item,
  .block-action-btn,
  .block-children {
    animation: none !important;
    transition: none !important;
  }

  .modal-content::before,
  .modal-header::before {
    animation: none !important;
  }

  .enhanced-block-item:hover,
  .block-action-btn:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .modal-content {
    border-width: 2px;
    border-color: #000000;
  }

  .block-action-btn {
    border-width: 2px;
  }
}

/* Focus styles for keyboard navigation */
.block-action-btn:focus-visible,
.tab:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: 2px;
}

/* Dark theme adjustments */
[data-theme="dark"] .modal-content {
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.95) 0%, rgba(35, 39, 47, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .modal-content::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.1) 0%, transparent 50%);
}

[data-theme="dark"] .modal-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* Login Page Styles */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  transition: background-color 0.3s ease;
}

.login-page.dark {
  background-color: #121212;
  color: white;
}

.login-page.light {
  background-color: #f5f5f5;
  color: #333;
}

.login-container {
  max-width: 450px;
  width: 100%;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.login-page.dark .login-container {
  background-color: #1e1e1e;
  border: 1px solid #333;
}

.login-page.light .login-container {
  background-color: white;
  border: 1px solid #eaeaea;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h1 {
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 600;
}

.login-page.dark .login-header h1 {
  color: white;
}

.login-page.light .login-header h1 {
  color: #333;
}

.login-header p {
  font-size: 16px;
  opacity: 0.8;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.login-page.dark .form-group label {
  color: #e0e0e0;
}

.login-page.light .form-group label {
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.login-page.dark .form-group input {
  background-color: #333;
  border: 1px solid #444;
  color: white;
}

.login-page.light .form-group input {
  background-color: white;
  border: 1px solid #ddd;
  color: #333;
}

.form-group input:focus {
  outline: none;
}

.login-page.dark .form-group input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.login-page.light .form-group input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

button[type="submit"] {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

button[type="submit"]:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.error-message {
  background-color: rgba(255, 87, 87, 0.1);
  color: #ff5757;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.login-page.dark .error-message {
  background-color: rgba(255, 87, 87, 0.2);
}

.login-page.light .error-message {
  background-color: rgba(255, 87, 87, 0.1);
}

.toggle-auth-mode {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
}

.login-page.dark .toggle-auth-mode {
  color: #e0e0e0;
}

.login-page.light .toggle-auth-mode {
  color: #555;
}

.toggle-auth-mode button {
  background: none;
  border: none;
  color: #4CAF50;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
}

.toggle-auth-mode button:hover {
  color: #45a049;
}

.form-hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.7;
}

.login-page.dark .form-hint {
  color: #aaa;
}

.login-page.light .form-hint {
  color: #666;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .login-container {
    padding: 20px;
  }

  .login-header h1 {
    font-size: 24px;
  }

  .login-header p {
    font-size: 14px;
  }

  .form-group input {
    padding: 10px;
    font-size: 14px;
  }

  button[type="submit"] {
    padding: 10px;
    font-size: 14px;
  }
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-darker, #121212);
  z-index: 9999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary, #8e54e9);
  animation: spin 1s ease-in-out infinite;
}

.loading-message {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary, #ffffff);
  text-align: center;
}

/* Dark theme adjustments */
.loading-screen.dark {
  background-color: #121212;
}

.loading-screen.dark .loading-message {
  color: #ffffff;
}

/* Light theme adjustments */
.loading-screen.light {
  background-color: #f8f9fa;
}

.loading-screen.light .spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--primary, #8e54e9);
}

.loading-screen.light .loading-message {
  color: #333;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Enhanced Profile Tab - Modern 2025 UX */

._profileTab_uq2ge_3 {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background:
    linear-gradient(135deg, rgba(24, 24, 37, 0.95) 0%, rgba(30, 30, 46, 0.95) 100%);
  color: var(--text-primary);
  position: relative;
  /* Entrance animation */
  animation: _profileSlideIn_uq2ge_1 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes _profileSlideIn_uq2ge_1 {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated background pattern */
._profileTab_uq2ge_3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(138, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: _profileBackgroundShift_uq2ge_1 12s ease-in-out infinite;
}

@keyframes _profileBackgroundShift_uq2ge_1 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

._profileTab_uq2ge_3 > * {
  position: relative;
  z-index: 1;
}

/* Loading and Error States */
._loading_uq2ge_53, ._error_uq2ge_53 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: var(--space-md);
}

._spinner_uq2ge_62 {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color-light);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: _spin_uq2ge_62 1s linear infinite;
}

@keyframes _spin_uq2ge_62 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Enhanced Header Section */
._profileHeader_uq2ge_77 {
  position: relative;
  margin-bottom: 40px;
  /* Staggered entrance animation */
  animation: _profileHeaderSlideIn_uq2ge_1 0.6s ease-out 0.2s both;
}

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

._coverImage_uq2ge_95 {
  height: 280px;
  background:
    linear-gradient(135deg, var(--primary, #8b5cf6) 0%, var(--accent, #06b6d4) 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  border-radius: 0 0 24px 24px;
  position: relative;
  overflow: hidden;
}

/* Cover image animated overlay */
._coverImage_uq2ge_95::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  animation: _coverShimmer_uq2ge_1 8s ease-in-out infinite;
}

@keyframes _coverShimmer_uq2ge_1 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

._profileInfo_uq2ge_124 {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 0 32px;
  margin-top: -80px;
  position: relative;
  z-index: 2;
  /* Staggered entrance animation */
  animation: _profileInfoSlideIn_uq2ge_1 0.6s ease-out 0.4s both;
}

@keyframes _profileInfoSlideIn_uq2ge_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._avatarSection_uq2ge_147 {
  flex-shrink: 0;
}

._avatar_uq2ge_147 {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(20px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

._avatar_uq2ge_147:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Avatar glow effect */
._avatar_uq2ge_147::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--primary, #8b5cf6), var(--accent, #06b6d4));
  z-index: -1;
  animation: _avatarGlow_uq2ge_1 3s ease-in-out infinite alternate;
}

@keyframes _avatarGlow_uq2ge_1 {
  from { opacity: 0.5; }
  to { opacity: 0.8; }
}

._avatar_uq2ge_147 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._avatarInitials_uq2ge_202 {
  font-size: 64px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary, #f8f8f2), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: _initialsGlow_uq2ge_1 3s ease-in-out infinite alternate;
}

@keyframes _initialsGlow_uq2ge_1 {
  from { filter: brightness(1); }
  to { filter: brightness(1.2); }
}

._basicInfo_uq2ge_217 {
  flex: 1;
  padding-bottom: 16px;
  /* Staggered entrance animation */
  animation: _basicInfoSlideIn_uq2ge_1 0.6s ease-out 0.6s both;
}

@keyframes _basicInfoSlideIn_uq2ge_1 {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

._displayInfo_uq2ge_235 h1._fullName_uq2ge_235 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

._username_uq2ge_242 {
  font-size: 18px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-xs) 0;
}

._bio_uq2ge_248 {
  font-size: 16px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

/* Edit Form */
._editForm_uq2ge_256 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
  /* Entrance animation */
  animation: _editFormSlideIn_uq2ge_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes _editFormSlideIn_uq2ge_1 {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Edit form background pattern */
._editForm_uq2ge_256::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: _editFormBackgroundShift_uq2ge_1 8s ease-in-out infinite;
}

@keyframes _editFormBackgroundShift_uq2ge_1 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

._editForm_uq2ge_256 > * {
  position: relative;
  z-index: 1;
}

._nameInput_uq2ge_309, ._usernameInput_uq2ge_309, ._locationInput_uq2ge_309, ._websiteInput_uq2ge_309 {
  padding: 16px 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  font-weight: 500;
}

._nameInput_uq2ge_309:focus, ._usernameInput_uq2ge_309:focus, ._locationInput_uq2ge_309:focus, ._websiteInput_uq2ge_309:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.6);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 4px rgba(139, 92, 246, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

._nameInput_uq2ge_309::placeholder, ._usernameInput_uq2ge_309::placeholder, ._locationInput_uq2ge_309::placeholder, ._websiteInput_uq2ge_309::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

._nameInput_uq2ge_309 {
  font-size: 24px;
  font-weight: 600;
}

._bioInput_uq2ge_341 {
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: 16px;
  background: var(--bg-dark);
  color: var(--text-primary);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

._nameInput_uq2ge_309:focus, ._usernameInput_uq2ge_309:focus, ._bioInput_uq2ge_341:focus, ._locationInput_uq2ge_309:focus, ._websiteInput_uq2ge_309:focus {
  outline: none;
  border-color: var(--primary);
}

/* Profile Actions - Enhanced */
._profileActions_uq2ge_360 {
  flex-shrink: 0;
  padding-bottom: var(--space-lg);
}

._editButton_uq2ge_365, ._saveButton_uq2ge_365, ._cancelButton_uq2ge_365 {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

/* Button shimmer effect */
._editButton_uq2ge_365::before, ._saveButton_uq2ge_365::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;
}

._editButton_uq2ge_365:hover::before, ._saveButton_uq2ge_365:hover::before {
  left: 100%;
}

._editButton_uq2ge_365 {
  background: linear-gradient(135deg, var(--primary, #8b5cf6) 0%, var(--secondary, #06b6d4) 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

._editButton_uq2ge_365:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

._editButton_uq2ge_365:active {
  transform: translateY(-1px) scale(0.98);
}

._editActions_uq2ge_413 {
  display: flex;
  gap: var(--space-md);
}

._saveButton_uq2ge_365 {
  background: linear-gradient(135deg, var(--success, #10b981) 0%, #059669 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

._saveButton_uq2ge_365:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

._saveButton_uq2ge_365:active {
  transform: translateY(-1px) scale(0.98);
}

._cancelButton_uq2ge_365 {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

._cancelButton_uq2ge_365:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  color: var(--text-primary);
}

/* Stats Bar - Enhanced */
._statsBar_uq2ge_448 {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-xl) var(--space-2xl);
  background: var(--bg-dark);
  border-radius: var(--radius-xl);
  margin: 0 var(--space-xl) var(--space-xl) var(--space-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

._stat_uq2ge_448 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  transition: transform var(--transition-normal);
}

._stat_uq2ge_448:hover {
  transform: translateY(-4px);
}

._statNumber_uq2ge_472 {
  font-size: 36px;
  font-weight: 900;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

._statLabel_uq2ge_482 {
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* Content Sections */
._profileContent_uq2ge_491 {
  padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

._section_uq2ge_498 {
  background:
    linear-gradient(135deg, rgba(49, 50, 68, 0.95) 0%, rgba(42, 42, 58, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Staggered entrance animation */
  animation: _sectionSlideIn_uq2ge_1 0.6s ease-out both;
}

._section_uq2ge_498:nth-child(1) { animation-delay: 0.1s; }
._section_uq2ge_498:nth-child(2) { animation-delay: 0.2s; }
._section_uq2ge_498:nth-child(3) { animation-delay: 0.3s; }
._section_uq2ge_498:nth-child(4) { animation-delay: 0.4s; }

@keyframes _sectionSlideIn_uq2ge_1 {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

._section_uq2ge_498:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.2),
    0 4px 15px rgba(0, 0, 0, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

/* Section background pattern */
._section_uq2ge_498::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: _sectionBackgroundShift_uq2ge_1 8s ease-in-out infinite;
}

@keyframes _sectionBackgroundShift_uq2ge_1 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

._section_uq2ge_498 > * {
  position: relative;
  z-index: 1;
}

._sectionTitle_uq2ge_564 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  padding: 24px 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, var(--text-primary, #f8f8f2), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* Section title shimmer effect */
._sectionTitle_uq2ge_564::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: _titleShimmer_uq2ge_1 4s ease-in-out infinite;
}

@keyframes _titleShimmer_uq2ge_1 {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

._sectionContent_uq2ge_599 {
  padding: var(--space-lg);
}

._sectionIcon_uq2ge_603 {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

/* Empty States */
._emptyState_uq2ge_610 {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  color: var(--text-secondary);
}

._emptyState_uq2ge_610 p {
  margin: 0 0 var(--space-md) 0;
  font-size: 16px;
}

._addButton_uq2ge_621 {
  padding: var(--space-xs) var(--space-md);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

._addButton_uq2ge_621:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

._buttonIcon_uq2ge_640 {
  width: 16px;
  height: 16px;
}

/* Project Grid */
._projectGrid_uq2ge_646 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

._projectCard_uq2ge_652 {
  padding: var(--space-lg);
  background: var(--bg-medium);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

._projectCard_uq2ge_652:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

._projectCard_uq2ge_652 h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

._projectCard_uq2ge_652 p {
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

._projectStatus_uq2ge_678 {
  display: inline-block;
  padding: var(--space-xxs) var(--space-xs);
  background: rgba(0, 123, 255, 0.15);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Work Grid */
._workGrid_uq2ge_690 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

._workCard_uq2ge_696 {
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light, #e5e5e5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

._workCard_uq2ge_696:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

._workPreview_uq2ge_709 {
  height: 160px;
  background: var(--bg-tertiary, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._workPreview_uq2ge_709 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._workPlaceholder_uq2ge_724 {
  font-size: 48px;
  color: var(--text-secondary, #6b7280);
}

._workCard_uq2ge_696 h3 {
  margin: 0 0 8px 0;
  padding: 16px 16px 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
}

._workCard_uq2ge_696 p {
  margin: 0 0 12px 0;
  padding: 0 16px;
  color: var(--text-secondary, #6b7280);
  line-height: 1.4;
  font-size: 14px;
}

._techStack_uq2ge_745 {
  padding: 0 16px 16px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._techTag_uq2ge_752 {
  padding: 2px 6px;
  background: var(--primary-alpha, rgba(59, 130, 246, 0.1));
  color: var(--primary, #3b82f6);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

/* Tag Containers */
._tagContainer_uq2ge_762 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

._skillTag_uq2ge_768, ._interestTag_uq2ge_768, ._availabilityTag_uq2ge_768, ._roleTag_uq2ge_768, ._toolTag_uq2ge_768 {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-round);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

._skillTag_uq2ge_768 {
  background: rgba(40, 167, 69, 0.15);
  color: var(--success);
  border-color: rgba(40, 167, 69, 0.3);
}

._interestTag_uq2ge_768 {
  background: rgba(255, 193, 7, 0.15);
  color: var(--warning);
  border-color: rgba(255, 193, 7, 0.3);
}

._availabilityTag_uq2ge_768 {
  background: rgba(0, 123, 255, 0.15);
  color: var(--primary);
  border-color: rgba(0, 123, 255, 0.3);
}

._roleTag_uq2ge_768 {
  background: rgba(255, 123, 0, 0.15);
  color: var(--accent);
  border-color: rgba(255, 123, 0, 0.3);
}

._toolTag_uq2ge_768 {
  background: var(--bg-medium);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

/* Collaboration Grid */
._collaborationGrid_uq2ge_808 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

._collaborationItem_uq2ge_814 h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._timezone_uq2ge_823 {
  padding: 6px 12px;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-primary, #1a1a1a);
  border: 1px solid var(--border-light, #e5e5e5);
}

/* Notes Grid */
._notesGrid_uq2ge_833 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

._noteCard_uq2ge_839 {
  padding: 16px;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
  border: 1px solid var(--border-light, #e5e5e5);
}

._noteCard_uq2ge_839 p {
  margin: 0 0 8px 0;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.5;
}

._noteDate_uq2ge_852 {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
}

/* Editable Tags Styles */
._editableTagsContainer_uq2ge_858 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._tagSection_uq2ge_864 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._tagSection_uq2ge_864 h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
}

._addTagContainer_uq2ge_877 {
  margin-top: 8px;
}

._tagInput_uq2ge_881 {
  padding: 8px 12px;
  border: 2px solid var(--border-light, #e5e5e5);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #1a1a1a);
  width: 200px;
}

._tagInput_uq2ge_881:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
}

._removeTagButton_uq2ge_896 {
  margin-left: 6px;
  background: none;
  border: none;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

._removeTagButton_uq2ge_896:hover {
  background: var(--danger, #ef4444);
  color: white;
}

._skillTag_uq2ge_768 ._removeTagButton_uq2ge_896:hover,
._interestTag_uq2ge_768 ._removeTagButton_uq2ge_896:hover {
  background: var(--danger, #ef4444);
  color: white;
}

/* Display Info Styles */
._location_uq2ge_309, ._website_uq2ge_309 {
  font-size: 14px;
  color: var(--text-secondary, #6b7280);
  margin: 4px 0;
}

._website_uq2ge_309 a {
  color: var(--primary, #3b82f6);
  text-decoration: none;
}

._website_uq2ge_309 a:hover {
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
  ._profileInfo_uq2ge_124 {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 0 16px;
  }

  ._profileContent_uq2ge_491 {
    padding: 0 16px 32px 16px;
  }

  ._statsBar_uq2ge_448 {
    margin: 0 16px 32px 16px;
    gap: 24px;
  }

  ._tagInput_uq2ge_881 {
    width: 100%;
    max-width: 300px;
  }

  ._projectGrid_uq2ge_646, ._workGrid_uq2ge_690 {
    grid-template-columns: 1fr;
  }

  ._collaborationGrid_uq2ge_808 {
    grid-template-columns: 1fr;
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  ._profileTab_uq2ge_3,
  ._profileHeader_uq2ge_77,
  ._profileInfo_uq2ge_124,
  ._basicInfo_uq2ge_217,
  ._section_uq2ge_498,
  ._avatar_uq2ge_147 {
    animation: none !important;
    transition: none !important;
  }

  ._profileTab_uq2ge_3::before,
  ._coverImage_uq2ge_95::before,
  ._avatar_uq2ge_147::before,
  ._section_uq2ge_498::before,
  ._sectionTitle_uq2ge_564::before {
    animation: none !important;
  }

  ._section_uq2ge_498:hover,
  ._avatar_uq2ge_147:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  ._profileTab_uq2ge_3 {
    border: 2px solid #ffffff;
  }

  ._section_uq2ge_498,
  ._avatar_uq2ge_147 {
    border-width: 3px;
    border-color: #ffffff;
  }

  ._section_uq2ge_498:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Focus styles for keyboard navigation */
._section_uq2ge_498:focus-visible,
._avatar_uq2ge_147:focus-visible,
._removeTagButton_uq2ge_896:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

/* Enhanced light theme adjustments */
[data-theme="light"] ._profileTab_uq2ge_3 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
}

[data-theme="light"] ._profileTab_uq2ge_3::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
}

[data-theme="light"] ._section_uq2ge_498 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] ._section_uq2ge_498::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
}

[data-theme="light"] ._avatar_uq2ge_147 {
  border-color: rgba(0, 0, 0, 0.1);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
}

/* Profile Quick Actions Floating Button */
._profileQuickActions_uq2ge_1057 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: _quickActionsSlideIn_uq2ge_1 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1s both;
}

@keyframes _quickActionsSlideIn_uq2ge_1 {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

._quickActionButton_uq2ge_1079 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary, #8b5cf6), var(--secondary, #06b6d4));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 8px 25px rgba(139, 92, 246, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

._quickActionButton_uq2ge_1079:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow:
    0 12px 35px rgba(139, 92, 246, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.15);
}

._quickActionButton_uq2ge_1079:active {
  transform: scale(0.95);
}

/* Quick action button shimmer */
._quickActionButton_uq2ge_1079::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

._quickActionButton_uq2ge_1079:hover::before {
  left: 100%;
}
/**
 * Everything Studio Native Workflow System - Canvas Styles
 * 
 * CSS styles for the workflow canvas with ES theme integration
 */

/* ============================================================================
   Canvas Container
   ============================================================================ */

.es-workflow-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--es-node-border);
  background: var(--es-canvas-bg, #f9fafb);
}

/* Dark theme canvas */
[data-theme="dark"] .es-workflow-canvas {
  --es-canvas-bg: #1f2937;
  --es-grid-color: #374151;
  --es-node-bg: #374151;
  --es-node-border: #4b5563;
  --es-node-text: #f9fafb;
  --es-node-shadow: rgba(0, 0, 0, 0.3);
}

/* Light theme canvas */
[data-theme="light"] .es-workflow-canvas {
  --es-canvas-bg: #f9fafb;
  --es-grid-color: #e5e7eb;
  --es-node-bg: #ffffff;
  --es-node-border: #d1d5db;
  --es-node-text: #111827;
  --es-node-shadow: rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   React Flow Overrides
   ============================================================================ */

.es-workflow-canvas .react-flow {
  background: transparent;
}

.es-workflow-canvas .react-flow__background {
  background: var(--es-canvas-bg);
}

.es-workflow-canvas .react-flow__controls {
  background: var(--es-node-bg);
  border: 1px solid var(--es-node-border);
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px var(--es-node-shadow);
}

.es-workflow-canvas .react-flow__controls button {
  background: var(--es-node-bg);
  border: none;
  color: var(--es-node-text);
  border-bottom: 1px solid var(--es-node-border);
  transition: all 0.2s ease;
}

.es-workflow-canvas .react-flow__controls button:hover {
  background: var(--es-grid-color);
}

.es-workflow-canvas .react-flow__controls button:last-child {
  border-bottom: none;
}

.es-workflow-canvas .react-flow__minimap {
  background: var(--es-node-bg);
  border: 1px solid var(--es-node-border);
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px var(--es-node-shadow);
}

/* ============================================================================
   Node Styles
   ============================================================================ */

/* REMOVED: Conflicting node styles - nodes handle their own styling */

/* REMOVED: Conflicting hover and selection styles - nodes handle their own styling */

/* Node type specific colors */
.es-workflow-canvas .react-flow__node[data-nodetype="fileOperation"] {
  border-color: #3b82f6;
}

.es-workflow-canvas .react-flow__node[data-nodetype="editorAction"] {
  border-color: #10b981;
}

.es-workflow-canvas .react-flow__node[data-nodetype="organizeUpdate"] {
  border-color: #f59e0b;
}

.es-workflow-canvas .react-flow__node[data-nodetype="aiEnhance"] {
  border-color: #8b5cf6;
}

.es-workflow-canvas .react-flow__node[data-nodetype="aiGenerate"] {
  border-color: #ec4899;
}

.es-workflow-canvas .react-flow__node[data-nodetype="aiAnalyze"] {
  border-color: #06b6d4;
}

.es-workflow-canvas .react-flow__node[data-nodetype="conditional"] {
  border-color: #ef4444;
}

.es-workflow-canvas .react-flow__node[data-nodetype="loop"] {
  border-color: #f97316;
}

.es-workflow-canvas .react-flow__node[data-nodetype="variable"] {
  border-color: #6b7280;
}

.es-workflow-canvas .react-flow__node[data-nodetype="trigger"] {
  border-color: #84cc16;
}

.es-workflow-canvas .react-flow__node[data-nodetype="output"] {
  border-color: #14b8a6;
}

/* ============================================================================
   Edge Styles
   ============================================================================ */

.es-workflow-canvas .react-flow__edge-path {
  stroke: var(--es-node-border);
  stroke-width: 2;
}

.es-workflow-canvas .react-flow__edge.selected .react-flow__edge-path {
  stroke: #3b82f6;
  stroke-width: 3;
}

.es-workflow-canvas .react-flow__edge:hover .react-flow__edge-path {
  stroke: #6b7280;
  stroke-width: 3;
}

.es-workflow-canvas .react-flow__arrowhead {
  fill: var(--es-node-border);
}

.es-workflow-canvas .react-flow__edge.selected .react-flow__arrowhead {
  fill: #3b82f6;
}

/* ============================================================================
   Handle Styles
   ============================================================================ */

.es-workflow-canvas .react-flow__handle {
  width: 10px;
  height: 10px;
  background: var(--es-node-bg);
  border: 2px solid var(--es-node-border);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.es-workflow-canvas .react-flow__handle:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  transform: scale(1.2);
}

.es-workflow-canvas .react-flow__handle-connecting {
  background: #3b82f6;
  border-color: #3b82f6;
}

/* ============================================================================
   Selection Box
   ============================================================================ */

.es-workflow-canvas .react-flow__selection {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid #3b82f6;
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 768px) {
  .es-workflow-canvas .react-flow__controls {
    bottom: 10px;
    right: 10px;
  }
  
  .es-workflow-canvas .react-flow__minimap {
    display: none;
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */

.es-workflow-canvas .react-flow__node:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.es-workflow-canvas .react-flow__edge:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .es-workflow-canvas .react-flow__node {
    border-width: 3px;
  }
  
  .es-workflow-canvas .react-flow__edge-path {
    stroke-width: 3;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .es-workflow-canvas .react-flow__node,
  .es-workflow-canvas .react-flow__handle,
  .es-workflow-canvas .react-flow__controls button {
    transition: none;
  }
}
/**
 * Everything Studio Native Workflow System - Properties Panel Styles
 * 
 * CSS styles for the properties panel component
 */

/* ============================================================================
   Properties Panel Container
   ============================================================================ */

.es-properties-panel {
  width: 320px;
  height: 100%;
  background: var(--es-panel-bg, #ffffff);
  border-left: 1px solid var(--es-border-color, #e5e7eb);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Dark theme */
[data-theme="dark"] .es-properties-panel {
  --es-panel-bg: #1f2937;
  --es-border-color: #374151;
  --es-text-primary: #f9fafb;
  --es-text-secondary: #d1d5db;
  --es-input-bg: #374151;
  --es-input-border: #4b5563;
  --es-hover-bg: #374151;
}

/* Light theme */
[data-theme="light"] .es-properties-panel {
  --es-panel-bg: #ffffff;
  --es-border-color: #e5e7eb;
  --es-text-primary: #111827;
  --es-text-secondary: #6b7280;
  --es-input-bg: #ffffff;
  --es-input-border: #d1d5db;
  --es-hover-bg: #f3f4f6;
}

/* ============================================================================
   Empty State
   ============================================================================ */

.es-properties-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px;
  text-align: center;
  color: var(--es-text-secondary);
}

.es-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--es-hover-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.es-empty-icon .material-icons {
  font-size: 32px;
  color: var(--es-text-secondary);
}

.es-properties-empty h3 {
  margin: 0 0 8px 0;
  color: var(--es-text-primary);
  font-size: 18px;
  font-weight: 600;
}

.es-properties-empty p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================================
   Properties Header
   ============================================================================ */

.es-properties-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--es-border-color);
  background: var(--es-panel-bg);
}

.es-node-type-badge {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.es-node-type-badge .material-icons {
  font-size: 20px;
}

.es-header-content h3 {
  margin: 0 0 4px 0;
  color: var(--es-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.es-node-type {
  font-size: 12px;
  color: var(--es-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ============================================================================
   Properties Content
   ============================================================================ */

.es-properties-section {
  padding: 20px;
  border-bottom: 1px solid var(--es-border-color);
}

.es-properties-section:last-child {
  border-bottom: none;
}

.es-properties-section h4 {
  margin: 0 0 16px 0;
  color: var(--es-text-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================================
   Property Groups
   ============================================================================ */

.es-property-group {
  margin-bottom: 16px;
}

.es-property-group:last-child {
  margin-bottom: 0;
}

.es-property-label {
  display: block;
  margin-bottom: 6px;
  color: var(--es-text-primary);
  font-size: 13px;
  font-weight: 500;
}

.es-required {
  color: #ef4444;
  margin-left: 2px;
}

/* ============================================================================
   Input Fields
   ============================================================================ */

.es-property-input,
.es-property-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--es-input-border);
  border-radius: 6px;
  background: var(--es-input-bg);
  color: var(--es-text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.es-property-input:focus,
.es-property-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.es-property-input:disabled,
.es-property-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.es-property-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.4;
}

/* ============================================================================
   Checkbox
   ============================================================================ */

.es-property-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--es-text-primary);
}

.es-property-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
}

.es-property-checkbox input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.es-checkbox-label {
  user-select: none;
}

/* ============================================================================
   Property Help
   ============================================================================ */

.es-property-help {
  margin-top: 4px;
  font-size: 11px;
  color: var(--es-text-secondary);
  line-height: 1.4;
}

/* ============================================================================
   Outputs List
   ============================================================================ */

.es-outputs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.es-output-item {
  padding: 12px;
  border: 1px solid var(--es-border-color);
  border-radius: 6px;
  background: var(--es-hover-bg);
}

.es-output-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--es-text-primary);
  margin-bottom: 4px;
}

.es-output-type {
  font-size: 11px;
  color: var(--es-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.es-output-description {
  font-size: 12px;
  color: var(--es-text-secondary);
  line-height: 1.4;
}

/* ============================================================================
   Status Indicator
   ============================================================================ */

.es-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--es-hover-bg);
}

.es-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.es-status-idle {
  background: #6b7280;
}

.es-status-running {
  background: #3b82f6;
  animation: pulse 2s infinite;
}

.es-status-completed {
  background: #10b981;
}

.es-status-error {
  background: #ef4444;
}

.es-status-skipped {
  background: #f59e0b;
}

.es-status-text {
  font-size: 13px;
  color: var(--es-text-primary);
  text-transform: capitalize;
}

/* ============================================================================
   Error Message
   ============================================================================ */

.es-error-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  font-size: 12px;
  line-height: 1.4;
}

.es-error-message .material-icons {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================================
   Animations
   ============================================================================ */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 768px) {
  .es-properties-panel {
    width: 280px;
  }
  
  .es-properties-header,
  .es-properties-section {
    padding: 16px;
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */

.es-property-input:focus,
.es-property-textarea:focus {
  outline: none;
}

.es-property-checkbox:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .es-property-input,
  .es-property-textarea {
    border-width: 2px;
  }
  
  .es-output-item {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .es-property-input,
  .es-property-textarea {
    transition: none;
  }
  
  .es-status-running {
    animation: none;
  }
}
/**
 * Everything Studio Native Workflow System - Workflow Toolbar Styles
 *
 * CSS styles for the workflow toolbar component
 */

/* ============================================================================
   Toolbar Container
   ============================================================================ */

.es-workflow-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--es-toolbar-bg, #ffffff);
  border-bottom: 1px solid var(--es-border-color, #e5e7eb);
  min-height: 72px;
}

/* Dark theme */
[data-theme="dark"] .es-workflow-toolbar {
  --es-toolbar-bg: #1f2937;
  --es-border-color: #374151;
  --es-text-primary: #f9fafb;
  --es-text-secondary: #d1d5db;
  --es-button-bg: #374151;
  --es-button-hover: #4b5563;
  --es-button-border: #4b5563;
}

/* Light theme */
[data-theme="light"] .es-workflow-toolbar {
  --es-toolbar-bg: #ffffff;
  --es-border-color: #e5e7eb;
  --es-text-primary: #111827;
  --es-text-secondary: #6b7280;
  --es-button-bg: #ffffff;
  --es-button-hover: #f3f4f6;
  --es-button-border: #d1d5db;
}

/* ============================================================================
   Left Section - Workflow Info
   ============================================================================ */

.es-toolbar-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.es-workflow-info {
  min-width: 0;
}

.es-workflow-name {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--es-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-workflow-description {
  margin: 0;
  font-size: 13px;
  color: var(--es-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.es-workflow-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.es-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--es-text-secondary);
  white-space: nowrap;
}

.es-stat .material-icons {
  font-size: 16px;
}

/* ============================================================================
   Right Section - Actions
   ============================================================================ */

.es-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.es-workflow-status {
  display: flex;
  align-items: center;
}

.es-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--es-button-bg);
  border: 1px solid var(--es-button-border);
  font-size: 12px;
  color: var(--es-text-secondary);
}

.es-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.es-status-text {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================================
   Action Buttons
   ============================================================================ */

.es-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.es-toolbar-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--es-button-border);
  border-radius: 6px;
  background: var(--es-button-bg);
  color: var(--es-text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.es-toolbar-button:hover:not(:disabled) {
  background: var(--es-button-hover);
  border-color: #3b82f6;
}

.es-toolbar-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.es-toolbar-button .material-icons {
  font-size: 18px;
}

/* Auto-save Status Indicator */
.es-auto-save-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  border-radius: 6px;
  color: #0369a1;
  font-size: 14px;
}

.es-auto-save-status .material-icons {
  font-size: 16px;
}

/* Execute Button */
.es-execute-button {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.es-execute-button:hover:not(:disabled) {
  background: #059669;
  border-color: #059669;
}

/* Menu Button */
.es-menu-button {
  padding: 10px;
  min-width: auto;
}

/* ============================================================================
   Dropdown Menu
   ============================================================================ */

.es-toolbar-menu {
  position: relative;
}

.es-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 160px;
  background: var(--es-toolbar-bg);
  border: 1px solid var(--es-border-color);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.es-toolbar-menu:hover .es-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.es-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--es-text-primary);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.es-menu-item:hover:not(:disabled) {
  background: var(--es-button-hover);
}

.es-menu-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.es-menu-item .material-icons {
  font-size: 18px;
}

.es-menu-item.es-danger {
  color: #ef4444;
}

.es-menu-divider {
  height: 1px;
  background: var(--es-border-color);
  margin: 4px 0;
}

/* ============================================================================
   Loading Animation
   ============================================================================ */

.es-spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 768px) {
  .es-workflow-toolbar {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: auto;
  }

  .es-toolbar-left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .es-workflow-stats {
    flex-wrap: wrap;
    gap: 12px;
  }

  .es-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .es-toolbar-button span:not(.material-icons) {
    display: none;
  }

  .es-toolbar-button {
    padding: 10px;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .es-workflow-description {
    max-width: 200px;
  }

  .es-workflow-stats {
    display: none;
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */

.es-toolbar-button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.es-menu-item:focus {
  outline: none;
  background: var(--es-button-hover);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .es-toolbar-button {
    border-width: 2px;
  }

  .es-dropdown-menu {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .es-toolbar-button,
  .es-dropdown-menu,
  .es-menu-item {
    transition: none;
  }

  .es-spinning {
    animation: none;
  }
}
/**
 * Everything Studio Native Workflow System - Workflow Builder Styles
 * 
 * Main CSS styles for the workflow builder component
 */

/* ============================================================================
   Workflow Builder Container
   ============================================================================ */

.es-workflow-builder {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--es-builder-bg, #f9fafb);
  overflow: hidden;
}

/* Dark theme */
[data-theme="dark"] .es-workflow-builder {
  --es-builder-bg: #111827;
  --es-panel-bg: #1f2937;
  --es-border-color: #374151;
  --es-text-primary: #f9fafb;
  --es-text-secondary: #d1d5db;
}

/* Light theme */
[data-theme="light"] .es-workflow-builder {
  --es-builder-bg: #f9fafb;
  --es-panel-bg: #ffffff;
  --es-border-color: #e5e7eb;
  --es-text-primary: #111827;
  --es-text-secondary: #6b7280;
}

/* ============================================================================
   Main Content Layout
   ============================================================================ */

.es-workflow-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ============================================================================
   Canvas Container
   ============================================================================ */

.es-workflow-canvas-container {
  flex: 1;
  position: relative;
  background: var(--es-builder-bg);
  overflow: hidden;
}

/* Drop zone styling */
.es-workflow-canvas-container.drag-over {
  background: rgba(59, 130, 246, 0.05);
}

.es-workflow-canvas-container.drag-over::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed #3b82f6;
  border-radius: 8px;
  margin: 16px;
  z-index: 10;
  pointer-events: none;
}

/* ============================================================================
   Layout Responsive Design
   ============================================================================ */

@media (max-width: 1024px) {
  .es-workflow-content {
    flex-direction: column;
  }
  
  .es-workflow-canvas-container {
    order: 2;
    min-height: 400px;
  }
  
  /* Stack panels horizontally on smaller screens */
  .es-workflow-content > :first-child,
  .es-workflow-content > :last-child {
    order: 1;
    width: 100%;
    height: 200px;
    display: flex;
  }
}

@media (max-width: 768px) {
  .es-workflow-builder {
    height: 100vh;
  }
  
  .es-workflow-content {
    flex-direction: column;
  }
  
  .es-workflow-canvas-container {
    min-height: 300px;
  }
  
  /* Hide panels on mobile, show as overlays */
  .es-workflow-content > :first-child,
  .es-workflow-content > :last-child {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .es-workflow-content > :first-child {
    left: 0;
  }
  
  .es-workflow-content > :last-child {
    right: 0;
    transform: translateX(100%);
  }
  
  /* Show panels when active */
  .es-workflow-content > :first-child.active,
  .es-workflow-content > :last-child.active {
    transform: translateX(0);
  }
}

/* ============================================================================
   Panel Toggle Buttons (Mobile)
   ============================================================================ */

@media (max-width: 768px) {
  .es-workflow-builder::before,
  .es-workflow-builder::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--es-panel-bg);
    border: 1px solid var(--es-border-color);
    border-radius: 8px;
    z-index: 30;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .es-workflow-builder::before {
    left: 8px;
    content: '☰';
  }
  
  .es-workflow-builder::after {
    right: 8px;
    content: '⚙';
  }
}

/* ============================================================================
   Loading States
   ============================================================================ */

.es-workflow-builder.loading {
  pointer-events: none;
}

.es-workflow-builder.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* Removed spinning loader */

/* Removed spin animation */

/* ============================================================================
   Error States
   ============================================================================ */

.es-workflow-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--es-text-secondary);
  z-index: 50;
}

.es-workflow-error .material-icons {
  font-size: 48px;
  color: #ef4444;
  margin-bottom: 16px;
}

.es-workflow-error h3 {
  margin: 0 0 8px 0;
  color: var(--es-text-primary);
  font-size: 18px;
  font-weight: 600;
}

.es-workflow-error p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================================
   Accessibility
   ============================================================================ */

.es-workflow-builder:focus-within {
  outline: none;
}

/* Keyboard navigation indicators */
.es-workflow-builder [tabindex]:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
  .es-workflow-builder {
    height: auto;
    background: white;
  }
  
  .es-workflow-content > :first-child,
  .es-workflow-content > :last-child {
    display: none;
  }
  
  .es-workflow-canvas-container {
    width: 100%;
    height: 600px;
    border: 1px solid #000;
  }
}

/* ============================================================================
   High Contrast Mode
   ============================================================================ */

@media (prefers-contrast: high) {
  .es-workflow-builder {
    border: 2px solid;
  }
  
  .es-workflow-canvas-container.drag-over::before {
    border-width: 3px;
  }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .es-workflow-content > :first-child,
  .es-workflow-content > :last-child {
    transition: none;
  }
  
  .es-workflow-builder.loading::after {
    animation: none;
  }
}
/**
 * Everything Studio Native Workflow System - Node Palette Styles
 * 
 * CSS styles for the node palette component
 */

/* ============================================================================
   Palette Container
   ============================================================================ */

.es-node-palette {
  width: 280px;
  height: 100%;
  background: var(--es-palette-bg, #ffffff);
  border-right: 1px solid var(--es-border-color, #e5e7eb);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Dark theme */
[data-theme="dark"] .es-node-palette {
  --es-palette-bg: #1f2937;
  --es-border-color: #374151;
  --es-text-primary: #f9fafb;
  --es-text-secondary: #d1d5db;
  --es-hover-bg: #374151;
  --es-active-bg: #4b5563;
  --es-accent-color: #3b82f6;
  --es-accent-hover: #1d4ed8;
}

/* Light theme */
[data-theme="light"] .es-node-palette {
  --es-palette-bg: #ffffff;
  --es-border-color: #e5e7eb;
  --es-text-primary: #111827;
  --es-text-secondary: #6b7280;
  --es-hover-bg: #f9fafb;
  --es-active-bg: #f3f4f6;
  --es-accent-color: #3b82f6;
  --es-accent-hover: #2563eb;
}

/* ============================================================================
   Search Bar
   ============================================================================ */

.es-palette-search {
  padding: 16px;
  border-bottom: 1px solid var(--es-border-color);
}

.es-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.es-search-icon {
  position: absolute;
  left: 12px;
  color: var(--es-text-secondary);
  font-size: 20px;
  z-index: 1;
}

.es-search-input {
  width: 100%;
  padding: 10px 12px 10px 44px;
  border: 1px solid var(--es-border-color);
  border-radius: 6px;
  background: var(--es-palette-bg);
  color: var(--es-text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.es-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.es-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--es-text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.es-search-clear:hover {
  background: var(--es-hover-bg);
}

/* ============================================================================
   Category Tabs
   ============================================================================ */

.es-category-tabs {
  display: flex;
  border-bottom: 1px solid var(--es-border-color);
  background: var(--es-palette-bg);
}

.es-category-tab {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: none;
  color: var(--es-text-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.es-category-tab:hover {
  background: var(--es-hover-bg);
  color: var(--es-text-primary);
}

.es-category-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: var(--es-active-bg);
}

.es-category-tab .material-icons {
  font-size: 20px;
}

.es-tab-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

/* ============================================================================
   Palette Content
   ============================================================================ */

.es-palette-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.es-category-view,
.es-search-results {
  height: 100%;
}

/* ============================================================================
   Category Sections
   ============================================================================ */

.es-category {
  margin-bottom: 24px;
}

.es-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--es-text-primary);
  font-weight: 600;
  font-size: 14px;
}

.es-category-header .material-icons {
  font-size: 18px;
  color: var(--es-text-secondary);
}

.es-category-count {
  color: var(--es-text-secondary);
  font-weight: 400;
  font-size: 12px;
}

.es-category-nodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================================
   Node Items
   ============================================================================ */

.es-node-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--es-border-color);
  border-radius: 8px;
  background: var(--es-palette-bg);
  cursor: grab;
  transition: all 0.2s ease;
  border-left: 3px solid var(--node-color, #6b7280);
}

.es-node-item:hover {
  background: var(--es-hover-bg);
  border-color: var(--node-color, #6b7280);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.es-node-item:active {
  cursor: grabbing;
  transform: translateY(0);
}

.es-node-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--node-color, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.es-node-icon .material-icons {
  font-size: 18px;
}

.es-node-content {
  flex: 1;
  min-width: 0;
}

.es-node-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--es-text-primary);
  margin-bottom: 4px;
}

.es-node-description {
  font-size: 12px;
  color: var(--es-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================================
   Search Results
   ============================================================================ */

.es-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--es-text-secondary);
  text-align: center;
}

.es-no-results .material-icons {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.es-no-results p {
  margin: 0;
  font-size: 14px;
}

/* ============================================================================
   Palette Footer
   ============================================================================ */

.es-palette-footer {
  padding: 16px;
  border-top: 1px solid var(--es-border-color);
  background: var(--es-palette-bg);
}

.es-drag-instructions {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--es-text-secondary);
  font-size: 12px;
  justify-content: center;
}

.es-drag-instructions .material-icons {
  font-size: 16px;
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 768px) {
  .es-node-palette {
    width: 240px;
  }
  
  .es-category-tab {
    padding: 8px 4px;
  }
  
  .es-tab-label {
    display: none;
  }
  
  .es-palette-content {
    padding: 12px;
  }
  
  .es-node-item {
    padding: 8px;
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */

.es-node-item:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.es-category-tab:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.es-search-input:focus {
  outline: none;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .es-node-item {
    border-width: 2px;
  }
  
  .es-category-tab.active {
    border-bottom-width: 3px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .es-node-item,
  .es-category-tab,
  .es-search-input {
    transition: none;
  }
}
._nativeFlowEditorTab_1bgd4_1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--background-color);
}
/* Token Balance Component - Theme Consistent Styles */

.token-balance {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.token-balance.compact {
  padding: 8px 12px;
  border-radius: 6px;
}

/* Header */
.token-balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.token-balance.compact .token-balance-header {
  margin-bottom: 0;
}

.token-balance-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.token-balance.compact .token-balance-main {
  gap: 8px;
}

/* Token Amount */
.token-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.token-count {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.token-balance.compact .token-count {
  font-size: 16px;
}

.token-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.token-balance.compact .token-label {
  font-size: 12px;
}

/* Status Colors */
.token-amount.healthy .token-count {
  color: var(--success);
}

.token-amount.warning .token-count {
  color: var(--warning);
}

.token-amount.critical .token-count {
  color: var(--error);
}

/* Status Indicator */
.token-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.healthy {
  background-color: var(--success);
}

.status-indicator.warning {
  background-color: var(--warning);
}

.status-indicator.critical {
  background-color: var(--error);
}

.status-text {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Breakdown Toggle */
.breakdown-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.breakdown-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.toggle-icon {
  width: 14px;
  height: 14px;
}

/* Token Breakdown */
.token-breakdown {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  margin-top: 12px;
}

.breakdown-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.breakdown-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.breakdown-item:last-child {
  margin-bottom: 0;
}

.breakdown-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.breakdown-icon {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.breakdown-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
}

.breakdown-amount .available {
  font-weight: 600;
  color: var(--text-primary);
}

.breakdown-amount .total {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Progress Bars */
.breakdown-bar {
  height: 4px;
  background: var(--bg-medium);
  border-radius: 2px;
  overflow: hidden;
}

.breakdown-progress {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.breakdown-progress.free {
  background: linear-gradient(90deg, var(--success), #059669);
}

.breakdown-progress.trial {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.breakdown-progress.purchased {
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

/* Reset Info */
.reset-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
}

.reset-label {
  color: var(--text-secondary);
}

.reset-date {
  color: var(--text-primary);
  font-weight: 500;
}

/* Actions */
.token-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.purchase-tokens-button {
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.purchase-tokens-button:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.button-icon {
  width: 16px;
  height: 16px;
}

/* Compact Warning */
.compact-warning {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--error);
}

.warning-icon {
  width: 12px;
  height: 12px;
}

/* Loading State */
.token-balance.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.token-balance-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  color: var(--primary);
  animation: spin 1s linear infinite;
}

/* Error State */
.token-balance.error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.token-balance-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--error);
  font-size: 14px;
}

.error-icon {
  width: 16px;
  height: 16px;
}

.retry-button {
  background: none;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.retry-button:hover {
  background: var(--error);
  color: white;
}

.retry-icon {
  width: 12px;
  height: 12px;
}

/* Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Responsive Design */
@media (max-width: 768px) {
  .token-balance {
    padding: 12px;
  }
  
  .token-balance.compact {
    padding: 6px 10px;
  }
  
  .token-count {
    font-size: 20px;
  }
  
  .token-balance.compact .token-count {
    font-size: 14px;
  }
}
/* Token Purchase Component Styles */

.token-purchase {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  font-family: var(--font-family);
}

/* Header */
.token-purchase-header {
  text-align: center;
  margin-bottom: 32px;
}

.token-purchase-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.token-purchase-header p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
}

.current-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
}

.subscriber-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
}

.subscriber-icon {
  width: 12px;
  height: 12px;
}

.balance-label {
  color: var(--text-secondary);
}

.balance-amount {
  color: var(--text-primary);
  font-weight: 600;
}

/* Error Message */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--error-bg, #fef2f2);
  border: 1px solid var(--error-border, #fecaca);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  color: var(--error-color, #dc2626);
  font-size: 14px;
}

.error-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
  flex-shrink: 0;
}

.dismiss-error {
  background: none;
  border: none;
  color: var(--error-color, #dc2626);
  cursor: pointer;
  margin-left: auto;
  padding: 4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.dismiss-error:hover {
  background: rgba(220, 38, 38, 0.1);
}

.dismiss-icon {
  width: 16px;
  height: 16px;
}

/* Package Sections */
.package-section {
  margin-bottom: 48px;
}

.section-header {
  text-align: center;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.section-icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
}

.section-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.section-header p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

/* Packages Grid */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Package Card */
.package-card {
  position: relative;
  background: var(--bg-darker);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.package-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.package-card.subscription {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--bg-darker) 0%, rgba(var(--primary-rgb, 59, 130, 246), 0.05) 100%);
}

.package-card.subscription.popular {
  background: linear-gradient(135deg, var(--bg-darker) 0%, rgba(var(--primary-rgb, 59, 130, 246), 0.1) 100%);
  box-shadow: 0 8px 32px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}

.package-card.one-time {
  border-color: var(--border-color);
}

.package-card.one-time.popular {
  border-color: var(--success);
  background: linear-gradient(135deg, var(--bg-darker) 0%, rgba(34, 197, 94, 0.05) 100%);
}

.package-card.purchasing {
  opacity: 0.7;
  pointer-events: none;
}

/* Popular Badge */
.popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  padding: 4px 16px;
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.badge-icon {
  width: 12px;
  height: 12px;
}

.package-card.one-time .popular-badge {
  background: var(--success);
}

/* Package Header */
.package-header {
  text-align: center;
  margin-bottom: 24px;
}

.package-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.package-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.price-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
}

.price-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Package Content */
.package-content {
  margin-bottom: 24px;
}

.token-breakdown {
  margin-bottom: 16px;
}

.token-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.token-item.bonus {
  color: var(--success);
}

.token-icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

.token-item.bonus .token-icon {
  color: var(--success);
}

.token-text {
  color: var(--text-primary);
}

.token-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-weight: 600;
}

.total-label {
  color: var(--text-secondary);
}

.total-amount {
  color: var(--text-primary);
  font-size: 16px;
}

/* Package Value */
.package-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.value-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.value-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.value-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.savings-badge {
  background: var(--success);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Package Description */
.package-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Purchase Button */
.purchase-button {
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.purchase-button:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.purchase-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.subscription-button {
  background: var(--primary);
  font-size: 16px;
  font-weight: 600;
}

.subscription-button:hover:not(:disabled) {
  background: var(--primary-dark);
}

.one-time-button {
  background: var(--success);
  font-size: 15px;
}

.one-time-button:hover:not(:disabled) {
  background: var(--success-dark, #16a34a);
}

.button-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.button-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Purchase Info */
.purchase-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.info-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.info-section p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.support-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.support-link:hover {
  text-decoration: underline;
}

/* Loading State */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  gap: 16px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-container p {
  color: var(--text-secondary);
  font-size: 16px;
  margin: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Responsive Design */
@media (max-width: 768px) {
  .token-purchase {
    padding: 16px;
  }
  
  .token-purchase-header h2 {
    font-size: 24px;
  }
  
  .packages-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .package-card {
    padding: 20px;
  }
  
  .purchase-info {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* Token Dashboard Component Styles */

.token-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  font-family: var(--font-family);
}

/* Dashboard Header */
.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 24px 0;
}

.dashboard-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-darker);
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--border-color);
}

.tab-button {
  background: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

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

/* Dashboard Content */
.dashboard-content {
  min-height: 400px;
}

/* Overview Tab */
.dashboard-overview {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

.overview-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
}

.balance-card {
  grid-column: 1 / -1;
}

.overview-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

/* Stats Card */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-dark);
  border-radius: 8px;
}

.stat-icon {
  font-size: 24px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Recent Activity */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.activity-item:hover {
  background: var(--bg-hover);
}

.activity-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-type {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.activity-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.activity-tokens {
  font-size: 14px;
  font-weight: 600;
}

.activity-tokens.used {
  color: var(--error);
}

.activity-tokens.added {
  color: var(--success);
}

/* History Tab */
.dashboard-history {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.transaction-item:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.transaction-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.transaction-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.transaction-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.transaction-type {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.transaction-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.meta-item {
  position: relative;
}

.meta-item:not(:last-child)::after {
  content: '•';
  margin-left: 8px;
  color: var(--text-tertiary);
}

.transaction-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.token-amount {
  font-size: 16px;
  font-weight: 600;
}

.token-amount.used {
  color: var(--error);
}

.token-amount.added {
  color: var(--success);
}

.cost-amount {
  font-size: 12px;
  color: var(--text-secondary);
}

.load-more-button {
  align-self: center;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.load-more-button:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--primary);
}

.load-more-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Analytics Tab */
.dashboard-analytics {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 5;
}

.analytics-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.analytics-controls {
  display: flex;
  gap: 4px;
  background: var(--bg-darker);
  border-radius: 6px;
  padding: 4px;
  border: 1px solid var(--border-color);
  position: relative;
  z-index: 10;
}

.period-button {
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 11;
}

.period-button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

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

.analytics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.summary-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.summary-card h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 8px 0;
}

.summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.summary-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.usage-breakdown {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
}

.usage-breakdown h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.breakdown-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.breakdown-item:last-child {
  border-bottom: none;
}

.breakdown-label {
  font-size: 14px;
  color: var(--text-primary);
}

.breakdown-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Loading and Empty States */
.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--text-secondary);
  font-size: 14px;
}

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}



/* Responsive Design */
@media (max-width: 1024px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .analytics-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .token-dashboard {
    padding: 16px;
  }
  
  .dashboard-header h1 {
    font-size: 24px;
  }
  
  .dashboard-tabs {
    flex-wrap: wrap;
  }
  
  .tab-button {
    flex: 1;
    min-width: 80px;
  }
  
  .analytics-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .analytics-summary {
    grid-template-columns: 1fr;
  }
  
  .transaction-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .transaction-amount {
    align-items: flex-start;
  }
}
/* Token Management Tab Styles */

.token-management-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(135deg,
    var(--bg-darkest, #0a0a0a) 0%,
    rgba(255, 123, 0, 0.02) 50%,
    var(--bg-darkest, #0a0a0a) 100%);
  color: var(--text-primary);
  font-family: var(--font-family);
  overflow: hidden;
  position: relative;
}

.token-management-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255, 123, 0, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 123, 0, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.token-management-tab > * {
  position: relative;
  z-index: 1;
}

.token-management-tab.loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--text-secondary);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Header */
.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darker);
}

.header-left {
  flex: 1;
}

.tab-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.title-icon {
  color: var(--primary);
  flex-shrink: 0;
}

.tab-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.header-right {
  display: flex;
  align-items: center;
}

.quick-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.balance-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.balance-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
}

/* Navigation */
.tab-navigation {
  display: flex;
  gap: 4px;
  padding: 16px 32px 0;
  background: var(--bg-darkest);
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: 8px 8px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.nav-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-button.active {
  background: var(--bg-darker);
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

.nav-icon {
  color: currentColor;
  flex-shrink: 0;
}

/* Content */
.tab-content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  background: var(--bg-darkest);
}

/* Overview Section */
.overview-section {
  height: 100%;
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  height: 100%;
}

.overview-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary, #ff7b00) 0%, rgba(255, 123, 0, 0.3) 100%);
}

.overview-card:hover {
  box-shadow: 0 20px 40px rgba(255, 123, 0, 0.15);
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 123, 0, 0.3);
}

.overview-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.tips-icon {
  color: var(--primary);
  flex-shrink: 0;
}

.tips-icon {
  color: var(--primary);
  flex-shrink: 0;
}

/* Balance Card */
.balance-card {
  grid-row: span 2;
}

/* Stats Card */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Tips Card */
.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tips-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.tips-list li:last-child {
  border-bottom: none;
}

.tips-list li strong {
  color: var(--text-primary);
}

/* Activity Card */
.activity-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
}

.view-analytics-btn {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-analytics-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* Analytics and Purchase Sections */
.analytics-section,
.purchase-section {
  height: 100%;
}

/* Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
  .overview-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  
  .balance-card {
    grid-row: span 1;
  }
}

@media (max-width: 768px) {
  .tab-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .header-right {
    width: 100%;
  }
  
  .quick-balance {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .tab-content {
    padding: 16px 20px;
  }
  
  .tab-navigation {
    padding: 16px 20px 0;
    overflow-x: auto;
  }
  
  .nav-button {
    white-space: nowrap;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Enhanced Light Mode Support */
[data-theme="light"] .token-management-tab {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 123, 0, 0.02) 50%,
    rgba(255, 255, 255, 0.95) 100%);
  color: #1a1a1a;
}

[data-theme="light"] .token-management-tab::before {
  background: radial-gradient(circle at 20% 80%, rgba(255, 123, 0, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 123, 0, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .tab-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .tab-title {
  color: #1a1a1a;
}

[data-theme="light"] .tab-subtitle {
  color: #6b7280;
}

[data-theme="light"] .balance-value {
  color: var(--primary, #ff7b00);
}

[data-theme="light"] .overview-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .overview-card:hover {
  box-shadow: 0 20px 40px rgba(255, 123, 0, 0.15);
  border-color: rgba(255, 123, 0, 0.2);
}

[data-theme="light"] .overview-card h3 {
  color: #1a1a1a;
}

[data-theme="light"] .nav-button {
  color: #6b7280;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nav-button.active {
  color: var(--primary, #ff7b00);
  border-bottom-color: var(--primary, #ff7b00);
  background: rgba(255, 123, 0, 0.05);
}

[data-theme="light"] .tab-content {
  background: transparent;
}
/* Hierarchical Segment Editor Styles - Glassmorphism Theme */

.hierarchical-segment-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  color: #f8f8f2;
  overflow: hidden;
}

/* Loading State */
.hierarchical-editor-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 12px;
  color: var(--text-secondary, #a6adc8);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color, #45475a);
  border-top: 3px solid var(--accent-color, #fab387);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Header */
.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--background-secondary, #313244);
  border-bottom: 1px solid var(--border-color, #45475a);
}

.editor-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary, #f8f8f2);
}

.editor-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.level-toggle,
.constraint-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--background-tertiary, #45475a);
  border: 1px solid var(--border-color, #585b70);
  border-radius: 6px;
  color: var(--text-secondary, #a6adc8);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.level-toggle:hover,
.constraint-toggle:hover {
  background: var(--background-hover, #585b70);
  color: var(--text-primary, #f8f8f2);
}

.level-toggle.active,
.constraint-toggle.active {
  background: var(--accent-color, #fab387);
  color: var(--background-primary, #1e1e2e);
  border-color: var(--accent-color, #fab387);
}

/* Media Player Section */
.media-player-section {
  padding: 16px;
  background: var(--background-secondary, #313244);
  border-bottom: 1px solid var(--border-color, #45475a);
}

/* Timeline Editor */
.timeline-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

/* Custom scrollbar styling for timeline */
.timeline-editor::-webkit-scrollbar {
  height: 12px;
}

.timeline-editor::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.timeline-editor::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 53, 0.6);
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.3);
}

.timeline-editor::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 53, 0.8);
}

.timeline-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text-secondary, #a6adc8);
  font-size: 14px;
}

/* Timeline Levels */
.timeline-levels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  overflow-y: auto;
}

.timeline-level {
  position: relative;
  min-height: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-level:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.timeline-level.set-level {
  min-height: 50px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.timeline-level.bit-level {
  min-height: 45px;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.timeline-level.joke-level {
  min-height: 40px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.timeline-level.word-level {
  min-height: 25px;
  background: linear-gradient(135deg, #f97316, #ea580c);
}

/* Timeline Segments */
.timeline-segment {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  border: 2px solid transparent;
  user-select: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.timeline-segment.set {
  background: rgba(139, 92, 246, 0.9);
  color: white;
}

.timeline-segment.bit {
  background: rgba(6, 182, 212, 0.9);
  color: white;
}

.timeline-segment.joke {
  background: rgba(251, 191, 36, 0.9);
  color: #000;
}

.timeline-segment.word {
  background: rgba(249, 115, 22, 0.9);
  color: white;
  font-size: 10px;
}

.timeline-segment.word.punchline {
  background: rgba(239, 68, 68, 0.9);
  font-weight: bold;
}

/* Segment States */
.timeline-segment.active {
  border-color: var(--accent-color, #fab387);
  box-shadow: 0 0 0 2px rgba(250, 179, 135, 0.3);
  z-index: 10;
}

.timeline-segment.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  z-index: 15;
}

.timeline-segment.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.timeline-segment.hidden {
  opacity: 0.3;
}

.timeline-segment:hover:not(.locked) {
  transform: scale(1.02);
  filter: brightness(1.1);
  z-index: 5;
}

/* Segment Content */
.segment-content {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  overflow: hidden;
}

.segment-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.segment-duration {
  font-size: 10px;
  opacity: 0.8;
  white-space: nowrap;
}

.segment-confidence {
  font-size: 9px;
  opacity: 0.7;
  white-space: nowrap;
}

/* Resize Handles */
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.resize-handle.left {
  left: 0;
  border-radius: 4px 0 0 4px;
}

.resize-handle.right {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.timeline-segment:hover .resize-handle {
  opacity: 1;
}

.resize-handle:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Constraint Violations */
.constraint-violation {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--background-primary, #1e1e2e);
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 20;
}

.constraint-violation.warning {
  background: #f59e0b;
}

.constraint-violation.info {
  background: #06b6d4;
}

/* Timeline Ruler */
.timeline-ruler {
  height: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.ruler-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-color, #45475a);
}

.ruler-tick.major {
  background: var(--text-secondary, #a6adc8);
}

.ruler-label {
  position: absolute;
  top: 4px;
  font-size: 10px;
  color: var(--text-secondary, #a6adc8);
  transform: translateX(-50%);
}

/* Playhead */
.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-color, #fab387);
  z-index: 100;
  pointer-events: none;
}

.playhead::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  background: var(--accent-color, #fab387);
  border-radius: 50%;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .editor-header {
    padding: 8px 12px;
  }
  
  .editor-controls {
    gap: 4px;
  }
  
  .level-toggle,
  .constraint-toggle {
    padding: 4px 8px;
    font-size: 11px;
  }
  
  .timeline-levels {
    padding: 12px;
  }
  
  .timeline-level {
    min-height: 35px;
  }
  
  .timeline-level.set-level {
    min-height: 45px;
  }
  
  .timeline-level.bit-level {
    min-height: 40px;
  }
  
  .timeline-level.joke-level {
    min-height: 35px;
  }
  
  .timeline-level.word-level {
    min-height: 20px;
  }
  
  .timeline-segment {
    font-size: 11px;
    padding: 0 6px;
  }
  
  .timeline-segment.word {
    font-size: 9px;
  }
}
/* Universal Media Player Styles */

.universal-media-player {
  background: var(--bg-surface-1);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 100%;
  margin: 0 auto;
}

/* Video Collapse Header */
.video-collapse-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-surface-2, #45475a);
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background-color 0.2s ease;
  user-select: none;
  font-size: 14px;
}

.video-collapse-header:hover {
  background: var(--bg-surface-3, #585b70);
}

.video-collapse-icon {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.video-collapse-text {
  color: var(--text-secondary, #a6adc8);
  font-weight: 500;
}

/* Media Type Selector */
.media-type-selector {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.media-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-surface-2, #f9fafb);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.media-type-btn:hover {
  background: var(--bg-surface-3, #f3f4f6);
  border-color: var(--primary-color);
  color: var(--text-primary);
}

.media-type-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.universal-media-player.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  border-radius: 0;
  padding: 2rem;
  background: #000;
}

/* Media Element */
.media-element {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.universal-media-player.video .media-element {
  aspect-ratio: 16/9;
  background: #000;
}

.universal-media-player.audio .media-element {
  display: none; /* Hide audio element, use custom controls */
}

/* Media Info */
.media-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.media-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.media-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.separator {
  color: var(--text-tertiary);
}

/* Timeline */
.timeline-container {
  margin-bottom: 1.5rem;
}

.timeline {
  position: relative;
  height: 2rem;
  background: var(--bg-surface-2);
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
  overflow: hidden;
}

.timeline-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-surface-3);
}

.timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent-color) 100%);
  transition: width 0.1s ease;
  border-radius: 1rem;
}

.time-indicator {
  position: absolute;
  top: -2px;
  width: 4px;
  height: calc(100% + 4px);
  background: white;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  transition: left 0.1s ease;
}

/* Segment Markers */
.segment-marker {
  position: absolute;
  top: 2px;
  height: calc(100% - 4px);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
  border-left: 2px solid rgba(255, 255, 255, 0.3); /* Subtle line at start */
  border-right: 1px solid rgba(255, 255, 255, 0.2); /* Subtle line at end */
}

.segment-marker:hover {
  opacity: 1;
  transform: scaleY(1.1);
}

.segment-marker.active {
  opacity: 1;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.segment-marker.bit {
  background: rgba(139, 69, 19, 0.6);
  border: 1px solid #8b4513;
}

.segment-marker.joke {
  background: rgba(255, 165, 0, 0.7); /* Slightly more opaque for better visibility */
  border: 1px solid #ffa500;
  border-left: 2px solid #ff8c00; /* Stronger left border for jokes */
}

.segment-marker.setup {
  background: rgba(34, 197, 94, 0.6); /* Green for setup */
  border: 1px solid #22c55e;
  border-left: 2px solid #16a34a;
}

.segment-marker.punchline {
  background: rgba(239, 68, 68, 0.6); /* Red for punchline */
  border: 1px solid #ef4444;
  border-left: 2px solid #dc2626;
}

.segment-marker.segment {
  background: rgba(100, 149, 237, 0.6);
  border: 1px solid #6495ed;
}

/* Controls */
.media-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.primary-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.secondary-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.control-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.control-btn:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
  border-color: var(--primary);
  transform: scale(1.05);
}

.play-button {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.play-button:hover {
  background: var(--primary-hover);
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Volume Control */
.volume-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.volume-slider {
  width: 4rem;
  height: 4px;
  background: var(--bg-surface-3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Playback Rate */
.rate-select {
  padding: 0.25rem 0.5rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
}

.rate-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Segments List */
.segments-list {
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

.segments-list h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.segments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.segment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.segment-item:hover {
  background: var(--bg-surface-3);
  border-color: var(--primary);
}

.segment-item.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.segment-name {
  font-weight: 500;
  flex: 1;
  color: var(--text-primary); /* Theme-consistent text color */
}

.segment-time {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  color: var(--text-secondary); /* Already theme-consistent */
  margin-left: 1rem;
}

.segment-item.active .segment-time {
  color: rgba(255, 255, 255, 0.8);
}

.segment-confidence {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-surface-3);
  border-radius: 12px;
  margin-left: 0.5rem;
}

.segment-item.active .segment-confidence {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
  .universal-media-player {
    padding: 1rem;
  }

  .media-controls {
    flex-direction: column;
    gap: 1rem;
  }

  .primary-controls {
    order: 1;
  }

  .secondary-controls {
    order: 2;
    justify-content: center;
    flex-wrap: wrap;
  }

  .volume-control {
    order: 1;
  }

  .segments {
    max-height: 150px;
  }

  .segment-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .segment-time,
  .segment-confidence {
    margin-left: 0;
  }
}

/* Audio-specific styles */
.universal-media-player.audio {
  background: linear-gradient(135deg, var(--bg-surface-1) 0%, var(--bg-surface-2) 100%);
}

.universal-media-player.audio .media-info {
  text-align: center;
}

/* Video-specific styles */
.universal-media-player.video {
  background: #000;
  color: white;
}

.universal-media-player.video .media-info,
.universal-media-player.video .segments-list {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  padding: 1rem;
}

/* Animations */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.play-button:active {
  animation: pulse 0.2s ease;
}

.control-btn:active {
  animation: pulse 0.15s ease;
}
/**
 * Integrated Hierarchical Segment Editor Styles
 * 
 * Glassmorphism design with Everything Studio branding
 */

.integrated-hierarchical-segment-editor {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  padding: 1rem;
  gap: 1rem;
  min-height: 600px;
}

/* Full-height version for standalone use */
.integrated-hierarchical-segment-editor.standalone {
  height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  overflow: hidden;
}

/* ============================================================================
   GLASSMORPHISM THEME COMPONENTS
   ============================================================================ */

.glassmorphism-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 16px;
}

.glassmorphism-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glassmorphism-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.glassmorphism-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 12px;
}

/* ============================================================================
   VIDEO PREVIEW SECTION
   ============================================================================ */

.video-preview-section {
  position: relative;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 1.5rem;
  overflow: hidden;
}

.video-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.video-section-header h3 {
  margin: 0;
  color: #f8f8f2;
  font-size: 1.1rem;
  font-weight: 600;
}

.collapse-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #f8f8f2;
  transform: translateY(-1px);
}

.video-container {
  position: relative;
  width: 100%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
  border-radius: 12px;
  overflow: hidden;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
}

.video-icon {
  color: rgba(255, 255, 255, 0.5);
}



.control-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.play-btn {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  border-color: #8b5cf6;
}

.play-btn:hover {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

.time-display {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  text-align: center;
}

.volume-btn {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   SCROLLABLE TIMELINE CONTAINER
   ============================================================================ */

.timeline-scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 1rem;
}

/* Custom Scrollbar */
.timeline-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.timeline-scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.timeline-scroll-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  border-radius: 4px;
}

.timeline-scroll-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

/* ============================================================================
   AUDIO VISUALIZER & TIMELINE CONTROLS
   ============================================================================ */

.audio-visualizer-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.audio-icon {
  color: rgba(255, 255, 255, 0.5);
}

.generate-visualizer-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #4ecdc4, #06b6d4);
  border: 1px solid #4ecdc4;
  border-radius: 12px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.generate-visualizer-btn:hover {
  background: linear-gradient(135deg, #44a08d, #0891b2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(78, 205, 196, 0.3);
}

.waveform-container {
  width: 100%;
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}



.zoom-level {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  min-width: 50px;
  text-align: center;
  font-family: 'Courier New', monospace;
}

.timeline-info {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 1rem;
}

/* Enhanced control buttons */
.control-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.control-btn:active {
  transform: scale(0.95);
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.control-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: none !important;
}

/* ============================================================================
   TIMELINE HEADER AND CONTROLS
   ============================================================================ */

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 12px;
}

.timeline-controls-group {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.media-controls-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.media-controls-section .time-display {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #ff6b35;
  min-width: 120px;
  text-align: center;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.3);
  border-radius: 6px;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zoom-level {
  color: #f8f8f2;
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

.timeline-info {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.timeline-info span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timeline-help {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Volume Controls */
.volume-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.volume-slider {
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #ff6b35;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  background: #ff8c5a;
  transform: scale(1.1);
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #ff6b35;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.volume-slider::-moz-range-thumb:hover {
  background: #ff8c5a;
  transform: scale(1.1);
}

.volume-slider::-webkit-slider-track {
  background: linear-gradient(to right, #ff6b35 0%, #ff6b35 var(--volume-percentage, 50%), rgba(255, 255, 255, 0.2) var(--volume-percentage, 50%), rgba(255, 255, 255, 0.2) 100%);
  height: 4px;
  border-radius: 2px;
}

.volume-percentage {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  min-width: 35px;
  text-align: right;
}

/* Zoom controls specific styling */
.zoom-controls .control-btn {
  width: 32px;
  height: 32px;
  padding: 0.25rem;
}

.zoom-controls .control-btn:hover {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  border-color: #8b5cf6;
}

/* When rendered directly in comedy-integrated mode (no outer tabs) */
.comedy-integrated .integrated-hierarchical-segment-editor {
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   HEADER
   ============================================================================ */

.integrated-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.integrated-editor-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.integrated-version {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.integrated-editor-controls {
  display: flex;
  gap: 1rem;
}

.integrated-control-btn {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.integrated-control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.integrated-control-btn.active {
  background: #ff6b35;
  border-color: #ff6b35;
}

/* ============================================================================
   TAB SYSTEM
   ============================================================================ */

.integrated-tab-navigation {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.integrated-tab-button {
  flex: 1;
  padding: 1rem 2rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  position: relative;
}

.integrated-tab-button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.integrated-tab-button.active {
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.1);
}

.integrated-tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #ff6b35;
}

.integrated-tab-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.integrated-tab-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================================
   COLLAPSIBLE VIDEO SECTION
   ============================================================================ */

.integrated-video-section {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.integrated-video-section.expanded {
  height: 300px;
}

.integrated-video-section.collapsed {
  height: 50px;
}

.integrated-video-header {
  height: 50px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.integrated-video-header:hover {
  background: rgba(255, 255, 255, 0.1);
}

.integrated-video-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.integrated-video-toggle {
  color: #ff6b35;
  transition: transform 0.2s;
}

.integrated-video-toggle.collapsed {
  transform: rotate(-90deg);
}

.integrated-video-info {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.integrated-video-content {
  height: 250px;
  padding: 1rem;
}

/* ============================================================================
   CONTENT AREAS
   ============================================================================ */

.integrated-preview-content,
.integrated-editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2rem;
}

.integrated-comedy-preview {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ============================================================================
   PLATFORM GRID
   ============================================================================ */

.integrated-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 2rem;
  overflow-y: auto;
}

.integrated-platform-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.integrated-platform-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.integrated-platform-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.integrated-platform-name {
  font-size: 1.1rem;
  font-weight: 600;
  flex: 1;
}

.integrated-platform-status {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.integrated-platform-status.connected {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.integrated-platform-status.disconnected {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.integrated-platform-description {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.integrated-platform-recommendation {
  margin-bottom: 1rem;
}

.integrated-recommendation-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}

.integrated-recommendation-text {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 0.9rem;
  border-left: 3px solid #ff6b35;
}

.integrated-platform-actions {
  display: flex;
  gap: 0.5rem;
}

.integrated-preview-btn,
.integrated-publish-btn,
.integrated-connect-btn {
  flex: 1;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.integrated-preview-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.integrated-preview-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.integrated-publish-btn {
  background: var(--primary);
  color: white;
}

.integrated-publish-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.integrated-connect-btn {
  color: white;
}

.integrated-connect-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
  .integrated-editor-header {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .integrated-editor-controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .integrated-tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  .integrated-preview-content,
  .integrated-editor-content {
    padding: 1rem;
  }

  .integrated-platform-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .integrated-video-section.expanded {
    height: 250px;
  }

  .integrated-video-content {
    height: 200px;
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  .integrated-editor-title {
    font-size: 1rem;
  }

  .integrated-control-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  .integrated-tab-button {
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.25rem;
  }

  .integrated-platform-actions {
    flex-direction: column;
  }
}

/* ============================================================================
   DARK MODE ENHANCEMENTS
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  .integrated-hierarchical-segment-editor {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  }
  
  .integrated-editor-header {
    background: rgba(0, 0, 0, 0.5);
  }
  
  .integrated-platform-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
  }
  
  .integrated-platform-card:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}
/* Action Button */
.action-button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: none;
  font-family: inherit;
  outline: none;
}

.action-button:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Size Variants */
.action-button.sm {
  padding: 6px 10px;
  font-size: 12px;
  min-height: 28px;
}

.action-button.md {
  padding: 8px 14px;
  font-size: 13px;
  min-height: 32px;
}

.action-button.lg {
  padding: 10px 16px;
  font-size: 14px;
  min-height: 36px;
}

/* Primary Variant */
.action-button.primary {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.action-button.primary:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
}

.action-button.primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Secondary Variant */
.action-button.secondary {
  background: #f8fafc;
  color: #374151;
  border-color: #d1d5db;
}

.action-button.secondary:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #3b82f6;
  color: #1f2937;
  transform: translateY(-1px);
}

.action-button.secondary:active:not(:disabled) {
  transform: translateY(0);
}

/* Danger Variant */
.action-button.danger {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

.action-button.danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-1px);
}

.action-button.danger:active:not(:disabled) {
  transform: translateY(0);
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
  .action-button.secondary {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
  }

  .action-button.secondary:hover:not(:disabled) {
    background: #4b5563;
    border-color: #3b82f6;
    color: #f9fafb;
  }
}

/* Theme CSS Variables Support */
[data-theme="dark"] .action-button.secondary,
.dark .action-button.secondary {
  background: #374151;
  color: #e5e7eb;
  border-color: #4b5563;
}

[data-theme="dark"] .action-button.secondary:hover:not(:disabled),
.dark .action-button.secondary:hover:not(:disabled) {
  background: #4b5563;
  border-color: #3b82f6;
  color: #f9fafb;
}
/* Enhanced Version Manager Styles */

.enhanced-version-manager {
  background: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Header */
.version-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-medium);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.version-header:hover {
  background: var(--bg-hover);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.version-title {
  font-weight: 600;
  font-size: 14px;
}

.current-version {
  background: var(--primary);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.create-version-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--accent-color, #007bff);
  color: white;
  border: 1px solid var(--accent-color, #007bff);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-version-btn:hover:not(:disabled) {
  background: var(--accent-color-hover, #0056b3);
  border-color: var(--accent-color-hover, #0056b3);
  transform: translateY(-1px);
}

.create-version-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.header-favorite-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-surface-1, #181a20);
  color: var(--text-secondary, #a0a0a0);
  border: 1px solid var(--border-color, #2a2e36);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-favorite-btn:hover {
  background: var(--bg-surface-2, #1f2329);
  border-color: var(--accent-color, #007bff);
  color: var(--text-primary, #e5e7eb);
  transform: translateY(-1px);
}

.collapse-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.collapse-btn:hover {
  background: var(--bg-surface-2, #1f2329);
  color: var(--text-primary, #e5e7eb);
}

/* Content */
.version-content {
  padding: 16px;
  background: var(--background-color);
}

/* Timeline Slider */
.version-timeline {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--surface-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.timeline-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-color);
}

.version-counter {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--background-color);
  padding: 4px 8px;
  border-radius: 4px;
}

.timeline-slider {
  position: relative;
}

.slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-markers {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 9px; /* Align with slider thumb center */
}

.marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.marker.active {
  background: var(--primary-color);
  transform: scale(1.2);
}

.marker:hover {
  background: var(--primary-color);
  transform: scale(1.1);
}

/* Single Version Info */
.single-version-info {
  background: var(--surface-color);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
  text-align: center;
}

.base-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-color);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.base-version-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Current Version Details */
.current-version-details {
  background: var(--surface-color);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border-color);
}

.version-info {
  margin-bottom: 16px;
}

.version-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.active-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--success-color);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.version-description {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.4;
  font-style: italic;
}

/* Version Actions */
.version-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Use more specific selectors to avoid conflicts with other .action-btn classes */
.enhanced-version-manager .version-actions .action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-medium);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 36px;
}

.enhanced-version-manager .version-actions .action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.enhanced-version-manager .version-actions .action-btn:active {
  transform: translateY(0);
}

.enhanced-version-manager .version-actions .action-btn.primary {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

.enhanced-version-manager .version-actions .action-btn.primary:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.enhanced-version-manager .version-actions .action-btn.secondary {
  background: var(--bg-lighter) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.enhanced-version-manager .version-actions .action-btn.secondary:hover {
  background: var(--bg-hover) !important;
  border-color: var(--primary) !important;
}

.enhanced-version-manager .version-actions .action-btn.danger {
  background: var(--bg-danger) !important;
  color: white !important;
  border-color: var(--bg-danger) !important;
}

.enhanced-version-manager .version-actions .action-btn.danger:hover {
  background: #c82333 !important;
  border-color: #c82333 !important;
}

.enhanced-version-manager .version-actions .action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.enhanced-version-manager .version-actions .action-btn:disabled:hover {
  background: var(--bg-medium);
  border-color: var(--border-color);
  color: var(--text-secondary);
  transform: none;
}

/* States */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-secondary);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-secondary);
  text-align: center;
}

.no-versions-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  gap: 12px;
  text-align: center;
}

.no-versions-icon {
  color: var(--text-tertiary);
  opacity: 0.6;
}

.no-versions-description {
  font-size: 0.875rem;
  margin: 0;
  max-width: 300px;
  line-height: 1.4;
}

.create-first-version-btn {
  padding: 10px 16px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-first-version-btn:hover:not(:disabled) {
  background: var(--primary-hover-color);
  transform: translateY(-1px);
}

.error-message {
  background: var(--error-background);
  color: var(--error-color);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
}

/* Spinner */
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .version-actions {
    flex-direction: column;
  }
  
  .action-btn {
    justify-content: center;
  }
  
  .timeline-markers {
    display: none; /* Hide markers on mobile for cleaner look */
  }
}
/**
 * Content Piece Card Styles
 * Modern glassmorphism design with dotted connections
 */

.content-piece-container {
  position: relative;
  margin-bottom: 16px;
}

.content-piece-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.content-piece-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.content-piece-card.chained {
  border-left: 3px solid rgba(245, 158, 11, 0.6);
}

/* Header */
.content-piece-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.piece-number {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
}

.intensity-score {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Content Sections */
.content-piece-content {
  margin-bottom: 16px;
}

.setup-section,
.punchline-section {
  margin-bottom: 12px;
}

.setup-label,
.punchline-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.setup-label {
  color: rgba(255, 255, 255, 0.6);
}

.punchline-label {
  color: rgba(16, 185, 129, 0.8);
}

.setup-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
}

.setup-text.chained-setup {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  position: relative;
}

.chained-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(245, 158, 11, 0.8);
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}

.punchline-text {
  color: white;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

/* Tags */
.content-piece-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tag {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: white;
}

.tag-role {
  background: rgba(16, 185, 129, 0.3);
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.tag-theme {
  background: rgba(59, 130, 246, 0.3);
  border: 1px solid rgba(59, 130, 246, 0.5);
}

.tag-technique {
  background: rgba(139, 92, 246, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.5);
}

.tag-chain {
  background: rgba(245, 158, 11, 0.3);
  border: 1px solid rgba(245, 158, 11, 0.5);
}

/* Actions */
.content-piece-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.jump-btn:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  color: #10b981;
}

.edit-tags-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: #3b82f6;
}

/* Flow Indicator */
.flow-indicator {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  background: rgba(245, 158, 11, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  z-index: 10;
}

/* Dotted Connection */
.dotted-connection {
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 2px;
  height: 40px;
  transform: translateX(-50%);
  z-index: 5;
}

.connection-line {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(245, 158, 11, 0.8) 0px,
    rgba(245, 158, 11, 0.8) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Light Mode Adjustments */
[data-theme="light"] .content-piece-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

[data-theme="light"] .content-piece-card:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .piece-number {
  color: #6b7280;
}

[data-theme="light"] .setup-text {
  color: #374151;
}

[data-theme="light"] .punchline-text {
  color: #1a1a1a;
}

[data-theme="light"] .action-btn {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #6b7280;
}

[data-theme="light"] .action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-piece-card {
    padding: 16px;
  }
  
  .content-piece-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .content-piece-actions {
    flex-wrap: wrap;
  }
  
  .content-piece-tags {
    gap: 4px;
  }
  
  .tag {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* Animation for new content pieces */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-piece-container {
  animation: slideInUp 0.3s ease-out;
}

/* Hover effects for better interactivity */
.content-piece-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px 0 0 12px;
}

.content-piece-card:hover::before {
  opacity: 1;
}

.content-piece-card.chained::before {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
/**
 * Content Pieces List Styles
 * Modern glassmorphism design with navigation and timeline
 */

.content-pieces-list {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header */
.content-pieces-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
  color: white;
}

.navigation-controls {
  display: flex;
  gap: 8px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Filters */
.content-pieces-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.search-box,
.filter-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  flex: 1;
}

.search-box input,
.filter-box select {
  background: transparent;
  border: none;
  color: white;
  font-size: 14px;
  outline: none;
  flex: 1;
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.filter-box select option {
  background: #1e1e2e;
  color: white;
}

/* Status */
.content-pieces-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.filter-status {
  color: rgba(245, 158, 11, 0.8);
  font-style: italic;
}

/* Content Container */
.content-pieces-container {
  margin-bottom: 20px;
}

/* No Content Message */
.no-content-message {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.no-content-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.no-content-text {
  font-size: 16px;
  margin-bottom: 16px;
}

.clear-filters-btn {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-filters-btn:hover {
  background: rgba(245, 158, 11, 0.3);
}

/* Timeline */
.content-pieces-timeline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 14px;
}

.timeline-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.timeline-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.timeline-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.timeline-stats {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* Light Mode Adjustments */
[data-theme="light"] .content-pieces-list {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

[data-theme="light"] .header-title {
  color: #1a1a1a;
}

[data-theme="light"] .nav-btn {
  background: rgba(0, 0, 0, 0.05);
  color: #6b7280;
}

[data-theme="light"] .nav-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

[data-theme="light"] .search-box,
[data-theme="light"] .filter-box {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .search-box input,
[data-theme="light"] .filter-box select {
  color: #1a1a1a;
}

[data-theme="light"] .search-box input::placeholder {
  color: #9ca3af;
}

[data-theme="light"] .filter-box select option {
  background: white;
  color: #1a1a1a;
}

[data-theme="light"] .content-pieces-status {
  color: #6b7280;
}

[data-theme="light"] .filter-status {
  color: #d97706;
}

[data-theme="light"] .no-content-message {
  color: #9ca3af;
}

[data-theme="light"] .clear-filters-btn {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

[data-theme="light"] .clear-filters-btn:hover {
  background: rgba(245, 158, 11, 0.2);
}

[data-theme="light"] .content-pieces-timeline {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .timeline-label {
  color: #374151;
}

[data-theme="light"] .timeline-progress {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .timeline-stats {
  color: #6b7280;
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-pieces-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .navigation-controls {
    align-self: flex-end;
  }
  
  .content-pieces-filters {
    flex-direction: column;
  }
  
  .content-pieces-timeline {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .timeline-progress {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .content-pieces-list {
    padding: 16px;
  }
  
  .header-title {
    font-size: 16px;
  }
  
  .nav-btn {
    padding: 6px 8px;
    font-size: 11px;
  }
  
  .search-box,
  .filter-box {
    padding: 6px 8px;
  }
}

/* Animation for smooth transitions */
.content-pieces-container {
  transition: all 0.3s ease;
}

.timeline-fill {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus states for accessibility */
.nav-btn:focus,
.search-box input:focus,
.filter-box select:focus,
.clear-filters-btn:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* Loading state */
.content-pieces-list.loading {
  opacity: 0.7;
  pointer-events: none;
}

.content-pieces-list.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/**
 * Tag Manager Styles
 * Modern interface for editing content piece tags
 */

.tag-manager {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

/* Header */
.tag-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.save-btn {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
}

.save-btn:hover {
  background: rgba(16, 185, 129, 0.3);
}

.cancel-btn {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.cancel-btn:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* Current Tags */
.current-tags {
  margin-bottom: 24px;
}

.tag-type-section {
  margin-bottom: 16px;
}

.tag-type-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tag-type-label {
  font-weight: 600;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.9);
}

.tag-count {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.tag-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  position: relative;
}

.tag-confidence {
  opacity: 0.7;
  font-size: 10px;
}

.remove-tag-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.remove-tag-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

/* Add Tag Section */
.add-tag-section {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.add-tag-header {
  margin-bottom: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.add-tag-form {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.tag-type-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  color: white;
  font-size: 14px;
  min-width: 100px;
}

.tag-type-select option {
  background: #1e1e2e;
  color: white;
}

.tag-input-container {
  display: flex;
  flex: 1;
  position: relative;
}

.tag-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px 0 0 8px;
  padding: 8px 12px;
  color: white;
  font-size: 14px;
  outline: none;
}

.tag-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.tag-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.add-tag-btn {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: #3b82f6;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-tag-btn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.3);
}

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

/* Suggestions */
.tag-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(30, 30, 46, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  margin-top: 4px;
}

.suggestion-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 14px;
}

.suggestion-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Tag Statistics */
.tag-stats {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.stat-value {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

/* Light Mode Adjustments */
[data-theme="light"] .tag-manager {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

[data-theme="light"] .tag-manager-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .save-btn {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

[data-theme="light"] .cancel-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

[data-theme="light"] .tag-type-label {
  color: #374151;
}

[data-theme="light"] .tag-count {
  color: #9ca3af;
}

[data-theme="light"] .add-tag-section {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .add-tag-header {
  color: #374151;
}

[data-theme="light"] .tag-type-select,
[data-theme="light"] .tag-input {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1a1a1a;
}

[data-theme="light"] .tag-type-select option {
  background: white;
  color: #1a1a1a;
}

[data-theme="light"] .tag-input::placeholder {
  color: #9ca3af;
}

[data-theme="light"] .add-tag-btn {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

[data-theme="light"] .tag-suggestions {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .suggestion-item {
  color: #6b7280;
}

[data-theme="light"] .suggestion-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
}

[data-theme="light"] .tag-stats {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .stat-label {
  color: #6b7280;
}

[data-theme="light"] .stat-value {
  color: #1a1a1a;
}

/* Responsive Design */
@media (max-width: 768px) {
  .tag-manager {
    padding: 16px;
  }
  
  .tag-manager-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .header-actions {
    align-self: flex-end;
  }
  
  .add-tag-form {
    flex-direction: column;
  }
  
  .tag-input-container {
    margin-top: 8px;
  }
  
  .tag-stats {
    flex-direction: column;
    gap: 8px;
  }
}

/* Animation */
.tag-item {
  animation: slideInScale 0.2s ease-out;
}

@keyframes slideInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/**
 * Enhanced Compact Comedy Viewer Styles
 * Based on PRP mockups with glassmorphism design
 */

.enhanced-compact-comedy-viewer {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #333333;
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: 400px;
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  display: block;
  box-sizing: border-box;
}

/* Header */
.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 165, 0, 0.3);
}

.bit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 165, 0, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 165, 0, 0.2);
}

.bit-summary-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.bit-summary-item:hover {
  background: rgba(255, 165, 0, 0.2);
  border-color: rgba(255, 165, 0, 0.4);
  transform: translateY(-2px);
}

.bit-summary-item.active {
  background: rgba(255, 165, 0, 0.3);
  border-color: rgba(255, 165, 0, 0.6);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.3);
}

.bit-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #ffffff;
}

.bit-joke-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.viewer-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary-color, #8B5CF6), var(--secondary-color, #06B6D4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.viewer-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary, #666);
  align-items: center;
}

/* Bit Navigation */
.bit-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bit-info {
  flex: 1;
  text-align: center;
}

.bit-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #333);
  margin-bottom: 4px;
}

.bit-meta {
  font-size: 11px;
  color: var(--text-secondary, #666);
}

/* Setup Section */
.setup-section {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(34, 197, 94, 0.1);
  border-left: 3px solid #22C55E;
  border-radius: 6px;
}

.setup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.setup-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #22C55E;
  letter-spacing: 0.5px;
}

.setup-timing {
  font-size: 10px;
  color: var(--text-secondary, #666);
  font-family: 'SF Mono', Monaco, monospace;
}

.setup-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary, #333);
}

/* Punchline Section */
.punchline-section {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #EF4444;
  border-radius: 6px;
}

.punchline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.punchline-number {
  background: #EF4444;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 16px;
  text-align: center;
}

.punchline-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #EF4444;
  letter-spacing: 0.5px;
}

.punchline-score {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #333);
}

.punchline-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary, #333);
  margin-bottom: 8px;
}

.punchline-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timing-badge {
  font-size: 10px;
  color: var(--text-secondary, #666);
  font-family: 'SF Mono', Monaco, monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.play-punchline-btn {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #EF4444;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #EF4444;
  transition: all 0.2s ease;
}

.play-punchline-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

/* Navigation */
.punchline-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 8px;
}

.punchline-counter {
  font-size: 12px;
  color: var(--text-secondary, #666);
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.nav-btn {
  background: rgba(255, 165, 0, 0.2);
  border: 1px solid rgba(255, 165, 0, 0.4);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(10px);
}

.nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Play Controls */
.play-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.play-btn {
  background: linear-gradient(135deg, var(--primary-color, #8B5CF6), var(--secondary-color, #06B6D4));
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.play-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.play-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary, #333);
}

.play-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary, #666);
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* Debug Info */
.debug-info {
  margin-top: 8px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .enhanced-compact-comedy-viewer {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
  }
  
  .viewer-header h3 {
    color: #fff;
  }
  
  .setup-text,
  .punchline-text {
    color: #fff;
  }
  
  .nav-btn,
  .play-btn.secondary {
    color: #fff;
  }
}
/* Comedy Preview - Single Clean Implementation */

/* ============================================================================
   ROOT VARIABLES
   ============================================================================ */

.comedy-preview {
  /* Core Colors - Use theme variables */
  --primary-gradient: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-light, #818cf8));
  --success-gradient: linear-gradient(135deg, var(--success, #10b981), #34d399);
  --purple-gradient: linear-gradient(135deg, #8b5cf6, #a78bfa);
  --blue-gradient: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-light, #818cf8));
  
  /* Glassmorphism - Theme-aware */
  --glass-bg: var(--bg-secondary);
  --glass-border: var(--border-color);
  --glass-blur: blur(20px);
  --glass-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.15));
  
  /* Text Colors - Use project theme variables */
  --comedy-text-primary: var(--text-primary);
  --comedy-text-secondary: var(--text-secondary);
  --comedy-text-tertiary: var(--text-tertiary);
  
  /* Spacing & Sizing */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  
  /* Animation Easing */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout - Use project theme variables */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 1rem);
  background: var(--bg-primary);
  color: var(--comedy-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

/* Light Mode Adjustments - Follow project patterns */
[data-theme="light"] .comedy-preview {
  --glass-bg: var(--bg-secondary);
  --glass-border: var(--border-color);
  --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background: var(--bg-primary);
  color: var(--text-primary);
  --comedy-text-primary: var(--text-primary);
  --comedy-text-secondary: var(--text-secondary);
  --comedy-text-tertiary: var(--text-tertiary);
}

/* ============================================================================
   PREVIEW SUB-TAB NAVIGATION
   ============================================================================ */

.preview-subtab-navigation {
  margin-bottom: 1rem;
}

.subtab-nav-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  padding: 0.5rem;
}

.subtab-buttons {
  display: flex;
  gap: 0.25rem;
}

.subtab-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--comedy-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  position: relative;
}

.subtab-button:hover {
  background: var(--bg-hover);
  color: var(--comedy-text-primary);
  border-color: var(--border-color);
}

.subtab-button.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.subtab-button.active:hover {
  background: var(--primary-hover);
}

/* Sub-tab content styling */
.preview-subtab-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preview-subtab-content.compact-content {
  /* Existing compact view styling - maintain current behavior */
  overflow-y: auto;
}

.preview-subtab-content.transcript-content,
.preview-subtab-content.timeline-content {
  /* Full height for transcript and timeline views */
  min-height: 500px;
  flex: 1;
}

/* Mobile responsiveness for sub-tabs */
@media (max-width: 768px) {
  .subtab-buttons {
    flex-direction: column;
    gap: 0.125rem;
  }

  .subtab-button {
    padding: 0.75rem 1rem;
    justify-content: center;
  }

  .preview-subtab-content.transcript-content,
  .preview-subtab-content.timeline-content {
    min-height: 400px;
  }
}

@media (max-width: 480px) {
  .subtab-nav-glass {
    padding: 0.25rem;
  }

  .subtab-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

  .subtab-button span {
    display: none;
  }

  .preview-subtab-content.transcript-content,
  .preview-subtab-content.timeline-content {
    min-height: 300px;
  }
}

/* ============================================================================
   BLOCK HEADER
   ============================================================================ */

.comedy-header {
  transition: all 0.3s var(--ease-smooth);
}

.header-glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: 6px;
  box-shadow: var(--glass-shadow);
  padding: 4px 8px;
  transition: all 0.3s var(--ease-smooth);
  position: relative;
  z-index: 8;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

.header-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.header-action-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
   VERSION MODAL STYLES
   ============================================================================ */

.version-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.version-modal-content {
  background: linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  width: 90vw;
  max-width: 800px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.3s ease-out;
}

.version-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.version-modal-header h3 {
  margin: 0;
  color: #f8f8f2;
  font-size: 1.25rem;
  font-weight: 600;
}

.close-modal-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-modal-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8f8f2;
}

.version-modal-body {
  padding: 2rem;
  max-height: calc(80vh - 100px);
  overflow-y: auto;
}

.comedy-version-manager {
  background: transparent;
  border: none;
  padding: 0;
}

/* ============================================================================
   VERSIONS TAB CONTENT
   ============================================================================ */

.versions-content {
  height: 100%;
}

.versions-content .content-glass-container {
  height: 100%;
}

.versions-content .tab-panel {
  padding: 0;
}

.comedy-enhanced-version-manager {
  background: transparent;
  border: none;
  padding: 1.5rem;
  height: 100%;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.block-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--primary-gradient);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
}

.block-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

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

.block-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.gradient-text {
  /* Fallback color for when gradient fails */
  color: var(--text-primary);
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Fallback for browsers that don't support background-clip */
@supports not (-webkit-background-clip: text) {
  .gradient-text {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: unset !important;
  }
}

.block-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.metadata-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.metadata-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.header-stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: var(--glass-blur);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: white;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.stat-number {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* ============================================================================
   ACTION BAR
   ============================================================================ */

.comedy-action-bar {
  margin-bottom: 16px;
}

.action-bar-glass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--glass-shadow);
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
  z-index: 10;
  min-height: 48px;
}

.action-group-left {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.action-group-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.clean-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  white-space: nowrap;
}

.clean-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.clean-action-btn.primary {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.08) 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  color: var(--primary);
}

.clean-action-btn.primary:hover {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--primary-rgb), 0.12) 100%);
  border-color: rgba(var(--primary-rgb), 0.4);
}

.action-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  line-height: 1;
}

.new-badge {
  background: var(--primary-gradient);
  color: white;
}

.action-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-btn.premium {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.08) 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.action-btn.premium:hover {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25) 0%, rgba(var(--primary-rgb), 0.15) 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.2);
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.btn-text {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.btn-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.btn-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--primary-gradient);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.4);
  animation: pulse 2s infinite;
}

.new-badge {
  background: var(--primary-gradient);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.4);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.action-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.info-label {
  color: var(--text-muted);
  font-weight: 500;
}

.info-value {
  color: var(--text-primary);
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid var(--glass-border);
}

.status-ready {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.08) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

/* ============================================================================
   TAB NAVIGATION
   ============================================================================ */

.comedy-tab-navigation {
  margin-bottom: 16px;
}

.tab-nav-glass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--glass-shadow);
}

.tab-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.tab-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
  overflow: hidden;
}

.tab-button:hover {
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.tab-button.active {
  color: white;
  background: var(--primary-gradient);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
  transform: translateY(-1px);
}

.tab-button.active svg {
  color: white;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--primary-gradient);
  border-radius: 1px;
  transition: width 0.3s var(--ease-smooth);
}

.tab-button.active .tab-indicator {
  width: 80%;
}

/* ============================================================================
   TAB CONTENT
   ============================================================================ */

.comedy-tab-content {
  flex: 1;
  min-height: 500px;
  height: auto;
  display: flex;
  flex-direction: column;
}

.content-glass-container {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--glass-shadow);
  overflow: visible;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 5;
  min-height: 400px;
  width: 100%;
}

.tab-panel {
  padding: 24px;
  flex: 1;
  animation: fadeInUp 0.4s var(--ease-smooth);
}

.scrollable-content {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 400px;
  height: auto;
  scroll-behavior: smooth;

  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
}

.scrollable-content::-webkit-scrollbar {
  width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), rgba(var(--primary-rgb), 0.3));
  border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.5), rgba(var(--primary-rgb), 0.5));
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   CONTENT PREVIEWS
   ============================================================================ */

/* Media Mode Toggle */
.media-mode-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
  border: 1px solid var(--glass-border);
}

.mode-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s var(--ease-smooth);
}

.mode-button.active {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3);
}

.mode-button:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* Bits List */
.bits-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bit-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: all 0.3s var(--ease-smooth);
}

.bit-card:hover {
  border-color: rgba(255, 107, 53, 0.3);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.15);
  transform: translateY(-2px);
}

.bit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--border-radius-lg);
  user-select: none;
}

.bit-header:hover {
  background: rgba(255, 107, 53, 0.08);
  transform: translateX(4px);
}

.bit-header:focus {
  outline: 2px solid rgba(255, 107, 53, 0.5);
  outline-offset: 2px;
}

.bit-main-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bit-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bit-number {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
}

.bit-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.bit-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bit-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--glass-border);
  transition: all 0.2s var(--ease-smooth);
}

.bit-stat:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 107, 53, 0.3);
  transform: translateY(-1px);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 140, 66, 0.08) 100%);
  border-radius: 50%;
  color: var(--primary);
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.stat-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.bit-expand-icon {
  color: var(--text-secondary);
  transition: all 0.2s var(--ease-smooth);
  padding: 4px;
  border-radius: 4px;
}

.bit-header:hover .bit-expand-icon {
  color: var(--primary);
  background: rgba(255, 107, 53, 0.1);
}

.bit-content {
  padding: 20px;
  border-top: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
  animation: slideDown 0.3s var(--ease-smooth);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}

.empty-bits {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--border-radius-lg);
  border: 2px dashed var(--glass-border);
}

.bit-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 16px 0;
}

/* Bit/Joke Specific Previews */
.bit-info-card,
.joke-content {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}

.bit-stats-grid,
.joke-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
}

/* Jokes Section */
.jokes-section {
  margin-top: 16px;
}

.jokes-section h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text-primary);
}

.jokes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.joke-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--glass-border);
  transition: all 0.3s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.joke-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(255, 107, 53, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.joke-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
}

.joke-item:hover::before {
  opacity: 1;
}

.joke-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--primary-gradient);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.joke-text {
  color: var(--text-primary);
  line-height: 1.6;
  flex: 1;
  font-size: 0.95rem;
  padding-top: 4px;
}

/* Joke Sections */
.joke-section {
  margin-bottom: 20px;
}

.joke-section h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.joke-section .joke-text {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--glass-border);
  line-height: 1.6;
  margin: 0;
}

.joke-text.punchline {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  font-weight: 500;
}

/* Placeholders */
.editor-placeholder,
.platform-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.editor-placeholder svg,
.platform-placeholder svg {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.editor-placeholder h3,
.platform-placeholder h3 {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.editor-placeholder p,
.platform-placeholder p {
  margin: 0 0 20px 0;
  color: var(--text-secondary);
}

.platform-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.platform-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.2s var(--ease-smooth);
}

.platform-badge:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.editor-features,
.platform-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  line-height: 1.5;
}

.feature-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.platform-actions {
  flex-direction: row;
  justify-content: center;
  gap: 16px;
}

.platform-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 140, 66, 0.05) 100%);
  border: 1px solid rgba(255, 107, 53, 0.3);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
}

.platform-action-btn:hover {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 140, 66, 0.1) 100%);
  border-color: rgba(255, 107, 53, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

/* ============================================================================
   BIT GROUPED CONTENT LIST
   ============================================================================ */

.bit-grouped-content-list {
  padding: 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: var(--glass-blur);
}

.bit-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
  padding: 0.75rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}

.bit-navigation .nav-btn {
  padding: 0.5rem 1rem;
  background: var(--purple-gradient);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.bit-navigation .nav-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bit-navigation .nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bit-counter {
  font-weight: 600;
  color: var(--text-primary);
}

.current-bit {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: var(--glass-blur);
}

.bit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.bit-info {
  flex: 1;
}

.bit-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.bit-description {
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
}

.bit-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.bit-rating {
  font-weight: 600;
  color: var(--text-primary);
}

.play-bit-btn {
  padding: 0.75rem;
  background: var(--success-gradient);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.play-bit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bit-content-pieces h5 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-weight: 600;
}

.content-pieces-grid {
  display: grid;
  gap: 1rem;
}

.bit-content-piece {
  margin: 0;
}

.all-bits-overview {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
}

.all-bits-overview h5 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-weight: 600;
}

.bits-list {
  display: grid;
  gap: 0.75rem;
}

.bit-summary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.bit-summary.current {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.bit-summary-header {
  display: flex;
  align-items: center;
  padding: 0.75rem;
}

.bit-expand-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  margin-right: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.bit-expand-btn:hover {
  background: var(--glass-bg);
  color: var(--text-primary);
}

.bit-summary-info {
  flex: 1;
  cursor: pointer;
  padding: 0.25rem 0;
}

.bit-summary-name {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.bit-summary-meta {
  display: block;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.bit-expanded-content {
  padding: 0 1rem 1rem 1rem;
  border-top: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.02);
}

.bit-expanded-description {
  margin: 0.75rem 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.bit-expanded-pieces {
  display: grid;
  gap: 0.5rem;
}

.mini-content-piece {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: var(--glass-bg);
  border-radius: 6px;
  font-size: 0.875rem;
}

.mini-piece-time {
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 3rem;
}

.mini-piece-text {
  flex: 1;
  color: var(--text-primary);
}

.mini-piece-rating {
  color: var(--text-primary);
  font-weight: 600;
}

/* ============================================================================
   PREVIEW CONTAINERS
   ============================================================================ */

.set-preview, .bit-preview, .joke-preview {
  padding: 1rem;
  padding-bottom: 80px; /* Space for stylized footer player */
  width: 100%;
  box-sizing: border-box;
}

.set-preview-enhanced {
  width: 100%;
  display: block;
}

/* ============================================================================
   COMPACT COMEDY VIEWER
   ============================================================================ */

.compact-comedy-viewer {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: var(--glass-blur);
  margin-bottom: 80px; /* Space for stylized footer player */
}

.viewer-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.viewer-header h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.viewer-stats {
  color: var(--text-secondary);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}

.nav-btn {
  padding: 0.75rem;
  background: var(--purple-gradient);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.current-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.bit-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bit-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.bit-counter {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.play-bit-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--success-gradient);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.play-bit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.play-joke-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--primary-gradient);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.play-joke-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.joke-display {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  min-height: 200px;
}

.joke-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.joke-nav-btn {
  width: 32px;
  height: 32px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-weight: 600;
  transition: all 0.2s ease;
}

.joke-nav-btn:hover:not(:disabled) {
  background: var(--purple-gradient);
  color: white;
  transform: translateY(-1px);
}

.joke-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.joke-counter {
  padding: 0.5rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.joke-content {
  text-align: center;
}

.setup, .punchline {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 8px;
}

.setup {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.punchline {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.setup .label, .punchline .label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.setup .text, .punchline .text {
  display: block;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.joke-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}



.joke-time {
  padding: 0.25rem 0.75rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.intensity {
  font-weight: 600;
  color: var(--text-primary);
}

.technique {
  padding: 0.25rem 0.75rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.bit-tabs-top {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  background: var(--glass-bg);
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

.bit-tab-top {
  min-width: 120px;
  padding: 0.75rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.bit-tab-top:hover {
  background: var(--purple-gradient);
  color: white;
  transform: translateY(-1px);
}

.bit-tab-top.active {
  background: var(--purple-gradient);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bit-tab-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: inherit;
  margin-bottom: 0.25rem;
}

.bit-tab-meta {
  font-size: 0.75rem;
  opacity: 0.8;
  color: inherit;
}

.play-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-stats {
    width: 100%;
    justify-content: space-between;
  }
  
  .block-metadata {
    flex-direction: column;
    gap: 8px;
  }
  
  .tab-nav-glass {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  
  .tab-buttons {
    width: 100%;
    justify-content: center;
  }
  
  .tab-button {
    flex: 1;
    justify-content: center;
  }
  
  .bit-stats-grid,
  .joke-stats-grid {
    grid-template-columns: 1fr;
  }

  .action-bar-glass {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .action-group-left,
  .action-group-right {
    justify-content: center;
  }

  .action-btn {
    flex: 1;
    min-width: 0;
  }

  .btn-content {
    align-items: center;
  }
}

/* ============================================================================
   MEDIA PLAYER SECTION
   ============================================================================ */

.media-player-section {
  margin-bottom: 24px;
}

.media-player-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  box-shadow: var(--glass-shadow);
}

.media-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.media-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--primary-gradient);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.media-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

.media-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.play-btn {
  width: 52px;
  height: 52px;
}

.media-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}

.progress-fill {
  height: 100%;
  background: var(--primary-gradient);
  border-radius: 3px;
  transition: width 0.1s ease;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 80px;
}

.media-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.media-type {
  color: var(--text-primary);
  font-weight: 600;
}

.media-status {
  color: #10b981;
  font-weight: 500;
}

/* ============================================================================
   MODERN MEDIA PLAYER
   ============================================================================ */

.thin-footer-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.95) 0%, rgba(var(--primary-rgb), 0.95) 100%);
  border-top: 1px solid var(--border-color);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1.5rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.footer-content-info {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 0.5rem 0;
}

.content-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.content-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.footer-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer-play-btn {
  background: rgba(var(--text-primary-rgb), 0.15);
  border: 2px solid rgba(var(--text-primary-rgb), 0.3);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-play-btn:hover {
  background: rgba(var(--text-primary-rgb), 0.25);
  border-color: rgba(var(--text-primary-rgb), 0.5);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.footer-time {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 600;
  min-width: 90px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.footer-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(var(--text-primary-rgb), 0.2);
  cursor: pointer;
  transition: height 0.2s ease;
}

.footer-progress-bar:hover {
  height: 5px;
}

.footer-progress-fill {
  height: 100%;
  background: var(--primary-gradient);
  transition: width 0.1s ease;
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
}



.segment-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  background: linear-gradient(135deg, #8b5cf6 0%, #4ecdc4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.segment-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.media-player-controls {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.play-pause-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.play-pause-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
}

.play-pause-btn:active {
  transform: scale(0.95);
}

.progress-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.current-time {
  color: #8b5cf6;
}

.separator {
  color: var(--text-muted);
}

.progress-bar-container {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6 0%, #4ecdc4 100%);
  border-radius: 3px;
  transition: width 0.1s ease;
}

.progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #8b5cf6 0%, #4ecdc4 100%);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  opacity: 0;
  transition: all 0.2s ease;
}

.progress-bar-container:hover .progress-handle {
  opacity: 1;
}

.volume-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.volume-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.volume-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  color: var(--text-primary);
  transform: scale(1.05);
}

.volume-slider {
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.volume-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ecdc4 0%, #06b6d4 100%);
  border-radius: 2px;
  transition: width 0.2s ease;
}

.no-audio-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  color: var(--text-secondary);
  text-align: center;
}

.no-audio-message svg {
  margin-bottom: 1rem;
  opacity: 0.5;
}

.no-audio-message span {
  font-size: 1rem;
  font-weight: 500;
}

/* Bits and Jokes Navigator */
.bits-navigator,
.jokes-navigator,
.joke-content-display {
  margin-top: 1.5rem;
}

.bits-list,
.jokes-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bit-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.bit-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.bit-header {
  padding: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bit-info {
  flex: 1;
}

.bit-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.bit-meta {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.bit-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.jump-to-btn,
.go-to-block-btn {
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 0.5rem;
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jump-to-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
  transform: scale(1.05);
}

.go-to-block-btn {
  background: rgba(78, 205, 196, 0.2);
  border-color: rgba(78, 205, 196, 0.3);
  color: #4ecdc4;
}

.go-to-block-btn:hover {
  background: rgba(78, 205, 196, 0.3);
  border-color: rgba(78, 205, 196, 0.5);
  transform: scale(1.05);
}

.expand-icon {
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.jokes-list .joke-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1rem;
  margin-left: 1rem;
}

.joke-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.joke-info .joke-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.joke-actions {
  display: flex;
  gap: 0.25rem;
}

.joke-actions .jump-to-btn,
.joke-actions .go-to-block-btn {
  padding: 0.375rem;
}

.joke-content {
  margin-top: 0.75rem;
}

.joke-setup,
.joke-punchline {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
}

.joke-setup {
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid #3b82f6;
}

.joke-punchline {
  background: rgba(var(--primary-rgb), 0.1);
  border-left: 3px solid var(--primary);
}

.joke-setup strong,
.joke-punchline strong {
  color: var(--text-primary);
  margin-right: 0.5rem;
}

/* ============================================================================
   SEGMENT NAVIGATOR
   ============================================================================ */

.segment-navigator {
  margin-bottom: 1.5rem;
}

.navigator-glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: var(--glass-blur);
  overflow: visible;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 1rem;
}

.navigator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.navigator-header:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.navigator-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.navigator-title svg {
  color: #4ecdc4;
}

.collapse-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.navigator-content {
  padding: 0 1.5rem 1.5rem;
}

.no-content-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  color: var(--text-secondary);
  text-align: center;
}

.no-content-icon {
  margin-bottom: 1rem;
  opacity: 0.5;
}

.no-content-message span {
  font-size: 1rem;
  font-weight: 500;
}

.segments-grid {
  display: grid;
  gap: 0.75rem;
}

.segment-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.segment-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
}

.segment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.segment-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.segment-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: white;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
}

.segment-details {
  flex: 1;
}

.segment-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.segment-stats {
  display: flex;
  gap: 1rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.stat-item svg {
  color: #4ecdc4;
}

.segment-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.jump-to-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #4ecdc4 0%, #06b6d4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.jump-to-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.expand-icon {
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.segment-content {
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.segment-description {
  margin-bottom: 1rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.jokes-grid {
  display: grid;
  gap: 0.5rem;
}

.joke-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.75rem;
  transition: all 0.2s ease;
}

.joke-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.joke-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.joke-number {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8b5cf6;
}

.joke-jump-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--primary-gradient);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.joke-jump-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.joke-content {
  font-size: 0.85rem;
  line-height: 1.4;
}

.joke-setup {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.joke-punchline {
  color: var(--text-primary);
}

.joke-setup strong,
.joke-punchline strong {
  color: #8b5cf6;
  font-weight: 600;
}

/* ============================================================================
   ENHANCED EDITOR AND PLATFORM SECTIONS
   ============================================================================ */

.editor-ready,
.platform-ready {
  text-align: center;
  padding: 40px 20px;
}

.editor-header,
.platform-header {
  margin-bottom: 32px;
}

.editor-header svg,
.platform-header svg {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.editor-header h3,
.platform-header h3 {
  margin: 0 0 8px 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.editor-header p,
.platform-header p {
  margin: 0 0 24px 0;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.5;
}

.editor-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  text-align: left;
}

.editor-actions,
.platform-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.editor-action-btn,
.platform-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
}

.editor-action-btn.primary,
.platform-action-btn.primary {
  background: var(--primary-gradient);
  border-color: rgba(255, 107, 53, 0.5);
  color: white;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
}

.editor-action-btn:hover,
.platform-action-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.editor-action-btn.primary:hover,
.platform-action-btn.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4);
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.platform-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  text-align: center;
  transition: all 0.3s var(--ease-smooth);
}

.platform-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 107, 53, 0.3);
}

.platform-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.platform-card h4 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.platform-card p {
  margin: 0 0 16px 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.platform-btn {
  padding: 8px 16px;
  background: var(--primary-gradient);
  border: none;
  border-radius: var(--border-radius-md);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
}

.platform-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* ============================================================================
   SIMPLE SEGMENT EDITOR - LIGHT MODE
   ============================================================================ */

.content-glass-container.light-mode {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.simple-segment-editor {
  padding: 24px;
  color: #1a1a2e;
}

.editor-header-simple {
  text-align: center;
  margin-bottom: 32px;
}

.editor-header-simple h3 {
  margin: 0 0 8px 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a1a2e;
}

.editor-header-simple p {
  margin: 0;
  color: #6b7280;
  font-size: 1.1rem;
}

.audio-player-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.audio-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  text-align: center;
}

.audio-error p {
  margin: 0;
  color: #ef4444;
  font-weight: 600;
}

.audio-loading {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  text-align: center;
}

.audio-loading p {
  margin: 0;
  color: #3b82f6;
  font-weight: 600;
}

.audio-info {
  margin-top: 12px;
  text-align: center;
}

.audio-info p {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.play-btn-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--primary-gradient);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.play-btn-simple:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

.play-btn-simple:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.audio-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-track {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}

.progress-fill {
  height: 100%;
  background: var(--primary-gradient);
  border-radius: 3px;
  transition: width 0.1s ease;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 600;
  min-width: 80px;
}

.volume-btn-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.volume-btn-simple:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

.segments-display h4 {
  margin: 0 0 16px 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a1a2e;
}

.segments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.segment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.segment-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.segment-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.segment-name {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 1rem;
}

.segment-duration {
  font-size: 0.85rem;
  color: #6b7280;
}

.segment-actions {
  display: flex;
  gap: 8px;
}

.segment-btn {
  padding: 6px 12px;
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.3);
  border-radius: 6px;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.segment-btn:hover {
  background: rgba(255, 107, 53, 0.2);
  border-color: rgba(255, 107, 53, 0.5);
}

.no-segments {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.no-segments p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.debug-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.debug-info h4 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #3b82f6;
}

.debug-item {
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #1a1a2e;
}

.debug-data {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.debug-data pre {
  margin: 8px 0 0 0;
  font-size: 0.8rem;
  color: #6b7280;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* ============================================================================
   VIEW MODE TOGGLE & CONTENT PIECES INTEGRATION
   ============================================================================ */

/* View Mode Toggle */
.view-mode-toggle {
  display: flex;
  gap: 8px;
  margin-left: 16px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.view-mode-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-mode-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.view-mode-btn.active {
  background: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Tag Manager Overlay */
.tag-manager-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}

.tag-manager-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.tag-manager-container {
  position: relative;
  z-index: 1001;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  animation: slideInUp 0.3s ease-out;
}

/* Light Mode Adjustments */
[data-theme="light"] .view-mode-toggle {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .view-mode-btn {
  color: #6b7280;
}

[data-theme="light"] .view-mode-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
}

[data-theme="light"] .view-mode-btn.active {
  background: rgba(var(--primary-rgb), 0.1);
  color: #d97706;
}

[data-theme="light"] .tag-manager-backdrop {
  background: rgba(255, 255, 255, 0.8);
}

/* Responsive Design for View Mode Toggle */
@media (max-width: 768px) {
  .view-mode-toggle {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
  }

  .view-mode-btn {
    flex: 1;
    justify-content: center;
  }
}

/* Animation for smooth transitions */
.comedy-preview * {
  transition: all 0.3s var(--ease-smooth);
}

/* View mode toggle animation */
.view-mode-btn {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================================
   COMPACT COMEDY VIEWER - ENHANCED MULTIPLE PUNCHLINES
   ============================================================================ */

/* Enhanced Setup Section */
.setup-section {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.setup-header .label {
  font-size: 11px;
  color: #a78bfa;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.play-setup-btn {
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 4px;
  padding: 4px 8px;
  color: #a78bfa;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.play-setup-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
}

.setup-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* Enhanced Punchlines Section */
.punchlines-section {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 12px;
}

.punchline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.punchline-header .label {
  font-size: 11px;
  color: #10b981;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.punchline-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.punchline-nav-btn {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  padding: 4px 8px;
  color: #10b981;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 24px;
}

.punchline-nav-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.5);
}

.punchline-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.punchline-counter {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.play-punchline-btn {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  padding: 4px 8px;
  color: #10b981;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.play-punchline-btn:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.5);
}

.punchline-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.punchline-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}

.punchline-time {
  color: rgba(255, 255, 255, 0.6);
}

.intensity, .rating {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  color: #10b981;
  font-weight: 500;
}

/* Fallback Single Punchline Section */
.punchline-section {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 12px;
}

/* ============================================================================
   COMPACT COMEDY VIEWER - GROUPED FORMAT
   ============================================================================ */

/* Grouped Mode Styles */
.compact-comedy-viewer.grouped-mode {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* 🎭 ENHANCED: Bit Navigation Tabs */
.bit-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding: 8px;
  background: var(--glass-bg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
}

.bit-tab {
  min-width: 140px;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
  text-align: center;
  backdrop-filter: var(--glass-blur);
  position: relative;
  overflow: hidden;
}

.bit-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
  z-index: -1;
}

.bit-tab:hover::before {
  opacity: 0.1;
}

.bit-tab.active::before {
  opacity: 1;
}

.bit-tab:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow);
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.3);
}

.bit-tab.active {
  color: white;
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.5);
  box-shadow: 0 4px 20px rgba(var(--primary-rgb, 99, 102, 241), 0.3);
}

.bit-tab-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: inherit;
  margin-bottom: 4px;
  line-height: 1.2;
}

.bit-tab.active .bit-tab-title {
  color: white;
}

.bit-tab-meta {
  font-size: 0.75rem;
  opacity: 0.8;
  color: var(--text-secondary);
  font-weight: 500;
}

.bit-tab.active .bit-tab-meta {
  color: rgba(255, 255, 255, 0.9);
}

.bit-tabs-grouped {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 4px;
}

.bit-tab-grouped {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.bit-tab-grouped.active {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: white;
  font-weight: 500;
}

.bit-tab-grouped:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}

.bit-tab-title {
  font-weight: 500;
  margin-bottom: 2px;
}

.bit-tab-meta {
  font-size: 10px;
  opacity: 0.7;
}

/* Current Setup Display */
.current-setup-display {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.setup-counter {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.setup-section {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  position: relative;
}

.setup-label {
  font-size: 10px;
  color: #a78bfa;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.setup-text {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.setup-timing {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Current Punchline Section */
.current-punchline-section {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  padding: 10px;
}

.punchline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.punchline-arrow {
  color: #10b981;
}

.punchline-counter {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.punchline-content {
  margin-left: 24px;
}

.punchline-text {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.punchline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-badge {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 2px;
}

.score-badge.score-strong {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.score-badge.score-good {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.score-badge.score-average {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.score-badge.score-weak {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.timing-badge {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  color: #818cf8;
}

/* Navigation Controls */
.navigation-controls-grouped {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.nav-btn-grouped {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 14px;
}

.nav-btn-grouped:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.nav-btn-grouped:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.current-info-grouped {
  flex: 1;
  text-align: center;
}

.group-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

.group-progress {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

/* Play Controls */
.play-controls-grouped {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.play-btn-grouped {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.1);
  color: #818cf8;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.play-btn-grouped:hover {
  background: rgba(99, 102, 241, 0.2);
  color: white;
}

/* Compact Group List */
.compact-group-list {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.group-header {
  padding: 8px 12px;
  background: rgba(139, 92, 246, 0.1);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  font-size: 11px;
  color: #a78bfa;
  font-weight: 600;
}

.punchline-item-list {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.punchline-item-list:last-child {
  border-bottom: none;
}

.punchline-item-list:hover {
  background: rgba(255, 255, 255, 0.05);
}

.punchline-item-list.active {
  background: rgba(99, 102, 241, 0.1);
  border-left: 3px solid #6366f1;
}

.punchline-number {
  font-size: 10px;
  color: #10b981;
  min-width: 20px;
  font-weight: 600;
}

.punchline-preview {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.punchline-score {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  font-weight: 500;
}

.punchline-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  min-width: 35px;
  text-align: right;
}

/* ============================================================================
   MULTIPLE PUNCHLINES DISPLAY STYLES
   ============================================================================ */

.compact-comedy-viewer {
  width: 100%;
  max-width: none;
}

.all-punchlines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
}

.punchline-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.punchline-item:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.2);
}

.punchline-number {
  color: #8b5cf6;
  font-weight: 600;
  font-size: 14px;
  min-width: 20px;
  margin-top: 2px;
}

.punchline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.punchline-text {
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.4;
}

.punchline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.punchline-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #9ca3af;
}

.play-punchline-btn {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px;
}

.play-punchline-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
}

.play-joke-btn {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.play-joke-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
}

.play-setup-btn {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.play-setup-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
}
/* TranscriptViewer - Enhanced Preview System Styles */

/* ============================================================================
   ROOT VARIABLES
   ============================================================================ */

.transcript-viewer {
  /* Color-coded highlighting as per PRP requirements */
  --transcript-setup-color: #8b5cf6; /* Purple for setup material */
  --transcript-punchline-color: #10b981; /* Green for punchlines */
  --transcript-audience-color: #f59e0b; /* Yellow for audience reactions */
  --transcript-default-color: var(--text-secondary);
  
  /* Glassmorphism styling */
  --glass-bg: var(--bg-secondary);
  --glass-border: var(--border-color);
  --glass-blur: blur(20px);
  --glass-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.15));
  
  /* Layout */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

/* ============================================================================
   TRANSCRIPT CONTROLS
   ============================================================================ */

.transcript-controls {
  flex-shrink: 0;
}

.transcript-controls-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Search Input */
.transcript-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 200px;
}

.transcript-search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.transcript-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Filter Select */
.transcript-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.transcript-filter-select {
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.transcript-filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Legend */
.transcript-legend {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-color.setup {
  background: var(--transcript-setup-color);
}

.legend-color.punchline {
  background: var(--transcript-punchline-color);
}

.legend-color.audience {
  background: var(--transcript-audience-color);
}

/* ============================================================================
   TRANSCRIPT CONTENT
   ============================================================================ */

.transcript-content {
  flex: 1;
  overflow-y: auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
}

.transcript-words {
  padding: 1.5rem;
  line-height: 1.8;
  font-size: 1rem;
  word-spacing: 0.1em;
}

/* Word Styling */
.transcript-word {
  display: inline;
  padding: 0.125rem 0.25rem;
  margin: 0.125rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  user-select: none;
}

.transcript-word:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Color-coded highlighting as per PRP requirements */
.transcript-word-setup {
  background: rgba(139, 92, 246, 0.15);
  color: var(--transcript-setup-color);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.transcript-word-setup:hover {
  background: rgba(139, 92, 246, 0.25);
}

.transcript-word-punchline {
  background: rgba(16, 185, 129, 0.15);
  color: var(--transcript-punchline-color);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.transcript-word-punchline:hover {
  background: rgba(16, 185, 129, 0.25);
}

.transcript-word-audience {
  background: rgba(245, 158, 11, 0.15);
  color: var(--transcript-audience-color);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.transcript-word-audience:hover {
  background: rgba(245, 158, 11, 0.25);
}

.transcript-word-default {
  background: rgba(107, 114, 128, 0.1);
  color: var(--transcript-default-color);
  border: 1px solid rgba(107, 114, 128, 0.2);
}

.transcript-word-default:hover {
  background: rgba(107, 114, 128, 0.2);
}

/* Active word (currently playing) */
.transcript-word.active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
  font-weight: 600;
}

/* Highlighted word (clicked) */
.transcript-word.highlighted {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.transcript-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-secondary);
  height: 100%;
}

.transcript-empty svg {
  color: var(--text-tertiary);
  margin-bottom: 1rem;
}

.transcript-empty h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.25rem;
}

.transcript-empty p {
  margin: 0 0 1.5rem 0;
  max-width: 400px;
}

.fallback-transcript {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
  text-align: left;
  max-width: 600px;
  width: 100%;
}

.fallback-transcript h5 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.fallback-transcript p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ============================================================================
   MOBILE RESPONSIVENESS
   ============================================================================ */

@media (max-width: 768px) {
  .transcript-controls-glass {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .transcript-search {
    min-width: unset;
  }
  
  .transcript-legend {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .transcript-words {
    padding: 1rem;
    font-size: 0.9rem;
  }
  
  .transcript-word {
    padding: 0.25rem 0.375rem;
    margin: 0.125rem 0.0625rem;
  }
}

@media (max-width: 480px) {
  .transcript-words {
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
  }
  
  .transcript-empty {
    padding: 2rem 1rem;
  }
}
/* HierarchicalTimelinePreview - Enhanced Preview System Styles */

/* ============================================================================
   ROOT VARIABLES
   ============================================================================ */

.hierarchical-timeline-preview {
  /* Glassmorphism styling */
  --glass-bg: var(--bg-secondary);
  --glass-border: var(--border-color);
  --glass-blur: blur(20px);
  --glass-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.15));
  
  /* Timeline colors */
  --timeline-set-color: #6366f1;
  --timeline-bit-color: #8b5cf6;
  --timeline-joke-color: #10b981;
  --timeline-word-color: #f59e0b;
  --timeline-progress-color: var(--primary);
  
  /* Layout */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

/* ============================================================================
   TIMELINE CONTROLS
   ============================================================================ */

.timeline-controls {
  flex-shrink: 0;
}

.timeline-controls-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.playback-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timeline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.timeline-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.timeline-btn.play-btn {
  width: 44px;
  height: 44px;
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.timeline-btn.play-btn:hover {
  background: var(--primary-hover);
  transform: scale(1.05);
}

.time-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zoom-level {
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: center;
}

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */

.timeline-progress-container {
  flex-shrink: 0;
  padding: 0 1rem;
}

.timeline-progress-bar {
  position: relative;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.timeline-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--timeline-progress-color), var(--primary-light));
  border-radius: 4px;
  transition: width 0.1s ease;
}

.timeline-progress-handle {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  background: var(--timeline-progress-color);
  border: 2px solid white;
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: left 0.1s ease;
}

.timeline-progress-handle:active {
  cursor: grabbing;
  transform: translateX(-50%) scale(1.2);
}

/* ============================================================================
   HIERARCHICAL TIMELINE
   ============================================================================ */

.hierarchical-timeline {
  flex: 1;
  overflow: auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
}

.timeline-container {
  min-width: 100%;
  padding: 1rem;
}

.timeline-level {
  display: flex;
  margin-bottom: 1rem;
  min-height: 60px;
}

.level-header {
  width: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-right: 1rem;
}

.level-header h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  writing-mode: horizontal-tb;
}

.level-content {
  flex: 1;
  position: relative;
  min-height: 40px;
  border-left: 2px solid var(--border-color);
  padding-left: 1rem;
}

/* Timeline Segments */
.timeline-segment {
  position: absolute;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.timeline-segment:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* Set Level Styling */
.set-segment {
  background: linear-gradient(135deg, var(--timeline-set-color), rgba(99, 102, 241, 0.8));
  color: white;
  border: 1px solid var(--timeline-set-color);
}

/* Bit Level Styling */
.bit-segment {
  background: linear-gradient(135deg, var(--timeline-bit-color), rgba(139, 92, 246, 0.8));
  color: white;
  border: 1px solid var(--timeline-bit-color);
  justify-content: space-between;
}

.segment-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  opacity: 0.9;
}

/* Joke Level Styling */
.joke-segment {
  background: linear-gradient(135deg, var(--timeline-joke-color), rgba(16, 185, 129, 0.8));
  color: white;
  border: 1px solid var(--timeline-joke-color);
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem;
}

.joke-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

.joke-setup {
  font-size: 0.625rem;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.joke-punchlines {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.punchline-indicator {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
}

/* Word Level Styling */
.word-level-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-style: italic;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-secondary);
  height: 100%;
}

.timeline-empty svg {
  color: var(--text-tertiary);
  margin-bottom: 1rem;
}

.timeline-empty h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.25rem;
}

.timeline-empty p {
  margin: 0;
  max-width: 400px;
}

/* ============================================================================
   MOBILE RESPONSIVENESS
   ============================================================================ */

@media (max-width: 768px) {
  .timeline-controls-glass {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .playback-controls,
  .volume-control,
  .zoom-controls {
    justify-content: center;
  }
  
  .level-header {
    width: 60px;
  }
  
  .level-header h4 {
    font-size: 0.75rem;
  }
  
  .timeline-segment {
    height: 32px;
    font-size: 0.625rem;
    padding: 0 0.5rem;
  }
  
  .joke-segment {
    padding: 0.25rem;
  }
}

@media (max-width: 480px) {
  .timeline-controls-glass {
    padding: 0.75rem;
  }
  
  .timeline-btn {
    width: 32px;
    height: 32px;
  }
  
  .timeline-btn.play-btn {
    width: 40px;
    height: 40px;
  }
  
  .level-header {
    width: 50px;
  }
  
  .timeline-segment {
    height: 28px;
    font-size: 0.5rem;
  }
  
  .timeline-empty {
    padding: 2rem 1rem;
  }
}
/* Workflow Editor Tab Styles */

.workflow-editor-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.workflow-editor-tab-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
}

.workflow-editor-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface-1);
  flex-shrink: 0;
}

.workflow-editor-tab-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-editor-tab-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.unsaved-indicator {
  color: var(--accent-color);
  font-size: 18px;
  font-weight: bold;
}

.workflow-editor-tab-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
}

.workflow-action-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-3);
  border-color: var(--accent-color);
}

.save-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: var(--accent-color);
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-btn:hover:not(:disabled) {
  background: var(--accent-color-hover);
}

.save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.workflow-editor-tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workflow-editor-tab-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface-1);
  flex-shrink: 0;
}

.workflow-editor-tab-info {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Light theme adjustments */
[data-theme="light"] .workflow-editor-tab {
  background: var(--bg-primary);
}

[data-theme="light"] .workflow-editor-tab-header {
  background: var(--bg-surface-1);
  border-color: var(--border-color-light);
}

[data-theme="light"] .workflow-action-btn {
  background: var(--bg-lighter);
  border-color: var(--border-color-light);
}

[data-theme="light"] .workflow-editor-tab-footer {
  background: var(--bg-surface-1);
  border-color: var(--border-color-light);
}
/* WorkflowExecutionTab.css */

.workflow-execution-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  background: var(--background-color);
  color: var(--text-color);
}

.workflow-execution-tab.dark {
  background: #1a1a1a;
  color: #ffffff;
}

.workflow-execution-tab.light {
  background: #ffffff;
  color: #000000;
}

/* Header */
.workflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.workflow-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workflow-title h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.workflow-title p {
  margin: 2px 0 0 0;
  font-size: 14px;
  opacity: 0.7;
}

.workflow-info {
  display: flex;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  opacity: 0.7;
}

/* Description */
.workflow-description {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.workflow-description p {
  margin: 0;
  line-height: 1.5;
  opacity: 0.8;
}

/* Block Inputs Section */
.block-inputs-section {
  margin-bottom: 32px;
}

.block-inputs-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color, #ff6b35);
}

.section-description {
  margin: 0 0 20px 0;
  font-size: 14px;
  opacity: 0.7;
  line-height: 1.4;
}

/* Block Input Area */
.block-input-area {
  margin-bottom: 24px;
}

.input-header {
  margin-bottom: 12px;
}

.input-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.input-label .required {
  color: #ef4444;
}

.input-description {
  margin: 0 0 4px 0;
  font-size: 14px;
  opacity: 0.7;
  line-height: 1.4;
}

.accepted-types {
  margin: 0;
  font-size: 12px;
  opacity: 0.6;
  font-style: italic;
}

/* Block Drop Zone */
.block-drop-zone {
  min-height: 120px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.block-drop-zone:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.block-drop-zone.drag-over {
  border-color: var(--primary-color, #ff6b35);
  background: rgba(255, 107, 53, 0.1);
  transform: scale(1.02);
}

.block-drop-zone.has-block {
  border-color: var(--primary-color, #ff6b35);
  background: rgba(255, 107, 53, 0.05);
}

/* Selected Block */
.selected-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin: 8px;
}

.block-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.block-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.block-name {
  font-size: 14px;
  font-weight: 500;
}

.block-type {
  font-size: 12px;
  opacity: 0.7;
}

.remove-block {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: inherit;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background-color 0.2s;
}

.remove-block:hover {
  background: rgba(255, 0, 0, 0.2);
}

/* Execution Status */
.execution-status {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.status-text {
  font-size: 14px;
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--primary-color, #ff6b35);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Execution Controls */
.execution-controls {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.execute-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: var(--primary-color, #ff6b35);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.execute-button:hover:not(:disabled) {
  background: var(--primary-color-hover, #e55a2b);
  transform: translateY(-1px);
}

.execute-button:disabled,
.execute-button.disabled {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  transform: none;
}

.validation-message {
  margin: 12px 0 0 0;
  font-size: 14px;
  color: #ef4444;
  text-align: center;
}

/* Spinner */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Text Colors */
.text-green-500 {
  color: #10b981;
}

.text-red-500 {
  color: #ef4444;
}

/* Responsive */
@media (max-width: 768px) {
  .workflow-execution-tab {
    padding: 16px;
  }
  
  .workflow-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .workflow-info {
    align-self: stretch;
    justify-content: space-between;
  }
  
  .block-drop-zone {
    min-height: 100px;
  }
  
  .selected-block {
    padding: 12px;
  }
}
/* Mobile-first responsive Creator Dashboard */
.creator-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface-1, #1a1a1a);
  color: var(--text-primary, #ffffff);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 1rem; /* Mobile-first: smaller padding */
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  /* Staggered entrance animation */
  animation: dashboardFadeIn 0.6s ease-out;
  /* Performance optimizations */
  will-change: transform, opacity;
  contain: layout style paint;
  /* Mobile touch optimization */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Desktop enhancement */
@media (min-width: 768px) {
  .creator-dashboard {
    padding: 2rem;
  }
}

/* Dashboard entrance animation */
@keyframes dashboardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile-first Workflow Steps Header */
.workflow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* Mobile-first: smaller gap */
  padding: 1rem; /* Mobile-first: smaller padding */
  background: #2a2a2a;
  border-radius: 12px; /* Mobile-first: smaller radius */
  margin-bottom: 1rem; /* Mobile-first: smaller margin */
  box-sizing: border-box;
  /* Staggered animation for workflow steps */
  animation: slideInFromTop 0.8s ease-out 0.1s both;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
  /* Mobile optimization */
  flex-wrap: wrap; /* Allow wrapping on small screens */
  overflow-x: auto; /* Horizontal scroll if needed */
  -webkit-overflow-scrolling: touch;
}

/* Desktop enhancement */
@media (min-width: 768px) {
  .workflow-steps {
    gap: 1rem;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    flex-wrap: nowrap;
  }
}

.workflow-steps:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Staggered entrance animations */
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #333;
  border-radius: 12px;
  min-width: 120px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Individual step staggered animations */
.step:nth-child(1) { animation: stepSlideIn 0.6s ease-out 0.2s both; }
.step:nth-child(3) { animation: stepSlideIn 0.6s ease-out 0.3s both; }
.step:nth-child(5) { animation: stepSlideIn 0.6s ease-out 0.4s both; }
.step:nth-child(7) { animation: stepSlideIn 0.6s ease-out 0.5s both; }

@keyframes stepSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.step.clickable {
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

/* Enhanced hover effects with modern micro-interactions */
.step.clickable:hover {
  background: #3a3a3a;
  transform: translateY(-4px) scale(1.02);
  border-color: #007acc;
  box-shadow: 0 8px 25px rgba(0, 122, 204, 0.3);
}

.step.clickable:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 15px rgba(0, 122, 204, 0.4);
}

/* Ripple effect on click */
.step.clickable::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 122, 204, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
  pointer-events: none;
}

.step.clickable:active::before {
  width: 200px;
  height: 200px;
}

.step-icon {
  font-size: 2rem;
  opacity: 0.8;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Playful shake animation on hover */
.step.clickable:hover .step-icon {
  animation: iconShake 0.6s ease-in-out;
}

@keyframes iconShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-3deg) scale(1.05); }
  20% { transform: rotate(3deg) scale(1.1); }
  30% { transform: rotate(-3deg) scale(1.05); }
  40% { transform: rotate(3deg) scale(1.1); }
  50% { transform: rotate(-2deg) scale(1.05); }
  60% { transform: rotate(2deg) scale(1.05); }
  70% { transform: rotate(-1deg) scale(1.02); }
  80% { transform: rotate(1deg) scale(1.02); }
  90% { transform: rotate(0deg) scale(1.01); }
}

.step-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: #ccc;
}

.step-arrow {
  font-size: 1.5rem;
  color: #666;
  font-weight: bold;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Arrow wiggle when adjacent step is hovered */
.step.clickable:hover + .step-arrow,
.step-arrow:has(+ .step.clickable:hover) {
  animation: arrowWiggle 0.4s ease-in-out;
  color: #007acc;
}

@keyframes arrowWiggle {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(3px) scale(1.1); }
  50% { transform: translateX(-3px) scale(1.1); }
  75% { transform: translateX(2px) scale(1.05); }
}

/* Main Drop Area */
.drop-area {
  flex: 1;
  width: 100%;
  max-width: 100%;
  background: var(--bg-surface-2, #2a2a2a);
  margin: 2rem auto;
  border: 3px dashed var(--border-color, #555);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 400px;
  box-sizing: border-box;
  /* Staggered entrance animation */
  animation: dropAreaSlideIn 0.8s ease-out 0.6s both;
  overflow: hidden;
}

/* Animated gradient background */
.drop-area::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(0, 122, 204, 0.05), transparent);
  animation: shimmer 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drop-area:hover::before {
  opacity: 1;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(0%) translateY(0%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@keyframes dropAreaSlideIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.drop-area:hover {
  border-color: #007acc;
  background: #2f2f2f;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.drop-area.drag-over {
  border-color: #4ecdc4;
  background: linear-gradient(135deg, #4ecdc420, #44a08d20);
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 15px 40px rgba(78, 205, 196, 0.3);
  animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 15px 40px rgba(78, 205, 196, 0.3); }
  to { box-shadow: 0 20px 50px rgba(78, 205, 196, 0.5); }
}

.drop-content {
  pointer-events: none;
}

.drop-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.drop-subtitle {
  font-size: 1.5rem;
  color: #888;
  margin-bottom: 2rem;
}

.drop-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Drop area icon bounce animation */
.drop-area:hover .drop-icon {
  animation: dropIconBounce 0.8s ease-in-out;
}

@keyframes dropIconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  10% { transform: translateY(-8px) scale(1.1); }
  20% { transform: translateY(0) scale(1.05); }
  30% { transform: translateY(-6px) scale(1.08); }
  40% { transform: translateY(0) scale(1.03); }
  50% { transform: translateY(-4px) scale(1.05); }
  60% { transform: translateY(0) scale(1.02); }
  70% { transform: translateY(-2px) scale(1.03); }
  80% { transform: translateY(0) scale(1.01); }
  90% { transform: translateY(-1px) scale(1.01); }
}

/* Platform Buttons */
.platforms {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  background: #2a2a2a;
  margin: 0 auto 2rem auto;
  border-radius: 16px;
  box-sizing: border-box;
  /* Staggered entrance animation */
  animation: platformsSlideIn 0.8s ease-out 0.8s both;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

.platform {
  background: #333;
  border: 2px solid #555;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-width: 120px;
  overflow: hidden;
}

/* Individual platform staggered animations */
.platform:nth-child(1) { animation: platformSlideIn 0.6s ease-out 0.9s both; }
.platform:nth-child(2) { animation: platformSlideIn 0.6s ease-out 1.0s both; }
.platform:nth-child(3) { animation: platformSlideIn 0.6s ease-out 1.1s both; }
.platform:nth-child(4) { animation: platformSlideIn 0.6s ease-out 1.2s both; }

@keyframes platformSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.platform:hover {
  border-color: #007acc;
  background: #3a3a3a;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 122, 204, 0.3);
}

.platform.selected {
  border-color: #4ecdc4;
  background: #4ecdc420;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
  animation: selectedPulse 2s ease-in-out infinite;
}

@keyframes selectedPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4); }
  50% { box-shadow: 0 8px 30px rgba(78, 205, 196, 0.6); }
}

/* Removed optimal platform styling - now using standard selection */

/* Removed optimal glow animation */

.platform-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Platform icon wiggle animation */
.platform:hover .platform-icon {
  animation: platformWiggle 0.5s ease-in-out;
}

@keyframes platformWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-2deg) scale(1.05); }
  30% { transform: rotate(2deg) scale(1.1); }
  45% { transform: rotate(-2deg) scale(1.05); }
  60% { transform: rotate(2deg) scale(1.1); }
  75% { transform: rotate(-1deg) scale(1.02); }
  90% { transform: rotate(0deg) scale(1.01); }
}

.platform-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.platform-status {
  font-size: 0.75rem;
  color: #888;
}

/* Removed optimal badge styling - using standard platform status */

/* Send Button */
.send-button {
  width: 100%;
  max-width: 600px;
  background: linear-gradient(45deg, #007acc, #4ecdc4);
  border: none;
  color: white;
  padding: 1.25rem 3rem;
  border-radius: 16px;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 auto 2rem auto;
  box-shadow: 0 4px 20px rgba(0, 122, 204, 0.3);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  /* Staggered entrance animation */
  animation: sendButtonSlideIn 0.8s ease-out 1.3s both;
}

/* Animated gradient background */
.send-button::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;
}

.send-button:hover::before {
  left: 100%;
}

@keyframes sendButtonSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.send-button:hover:not(:disabled) {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 122, 204, 0.5);
  background: linear-gradient(45deg, #0088ff, #5ae4d4);
}

.send-button:active:not(:disabled) {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 6px 25px rgba(0, 122, 204, 0.6);
}

.send-button:disabled {
  background: #555;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Success Animation */
.share-success {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
  color: #000;
  padding: 2rem 3rem;
  border-radius: 16px;
  font-size: 1.25rem;
  font-weight: 600;
  z-index: 1000;
  box-shadow: 0 20px 60px rgba(78, 205, 196, 0.4);
  animation: successBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Modern success animation with spring physics */
@keyframes successBounceIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-10deg);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.95) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

/* Confetti-like particles effect */
.share-success::before {
  content: '🎉';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: confetti 0.8s ease-out;
}

@keyframes confetti {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px) scale(0.8);
  }
}

/* Loading Skeleton Screens */
.skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: shimmerSkeleton 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmerSkeleton {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-workflow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: #2a2a2a;
  border-radius: 16px;
  margin-bottom: 2rem;
  animation: slideInFromTop 0.8s ease-out 0.1s both;
}

.skeleton-step {
  width: 120px;
  height: 80px;
  background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
  background-size: 200% 100%;
  animation: shimmerSkeleton 1.5s infinite;
  border-radius: 12px;
}

.skeleton-drop-area {
  flex: 1;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: shimmerSkeleton 1.5s infinite;
  margin: 2rem auto;
  border-radius: 24px;
  min-height: 400px;
}

.skeleton-platforms {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  background: #2a2a2a;
  margin: 0 auto 2rem auto;
  border-radius: 16px;
}

.skeleton-platform {
  width: 120px;
  height: 100px;
  background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
  background-size: 200% 100%;
  animation: shimmerSkeleton 1.5s infinite;
  border-radius: 12px;
}

.skeleton-send-button {
  width: 100%;
  max-width: 600px;
  height: 60px;
  background: linear-gradient(90deg, #555 25%, #666 50%, #555 75%);
  background-size: 200% 100%;
  animation: shimmerSkeleton 1.5s infinite;
  margin: 0 auto 2rem auto;
  border-radius: 16px;
}

/* Removed optimal platform floating animation */

/* Send button breathing effect when enabled */
.send-button:not(:disabled) {
  animation: buttonBreathe 3s ease-in-out infinite;
}

@keyframes buttonBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

/* Continuous shimmer on drop area when empty */
.drop-area:not(.drag-over) .drop-content {
  animation: contentShimmer 6s ease-in-out infinite;
}

@keyframes contentShimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .creator-dashboard,
  .workflow-steps,
  .step,
  .drop-area,
  .platforms,
  .platform,
  .send-button,
  .share-success,
  .step-icon,
  .platform-icon,
  .drop-icon,
  .optimal-badge,
  .step-arrow,
  .drop-content {
    animation: none !important;
    transition: none !important;
  }

  .step.clickable:hover,
  .platform:hover,
  .send-button:hover:not(:disabled),
  .drop-area:hover {
    transform: none !important;
  }

  .step.clickable:hover .step-icon,
  .platform:hover .platform-icon,
  .drop-area:hover .drop-icon {
    animation: none !important;
    transform: none !important;
  }

  .skeleton {
    animation: none !important;
    background: #3a3a3a !important;
  }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
  .creator-dashboard {
    background: #0a0a0a;
  }

  .workflow-steps,
  .platforms {
    background: #1a1a1a;
  }

  .step,
  .platform {
    background: #222;
    border-color: #444;
  }
}

/* Light mode support */
:root[data-theme="light"] .creator-dashboard {
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f5f5f5;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --border-color: #e0e0e0;
}

:root[data-theme="light"] .workflow-steps,
:root[data-theme="light"] .platforms {
  background: var(--bg-surface-2);
}

:root[data-theme="light"] .step,
:root[data-theme="light"] .platform {
  background: #ffffff;
  border-color: #e0e0e0;
  color: var(--text-primary);
}

:root[data-theme="light"] .drop-area {
  background: #ffffff;
  border-color: #d0d0d0;
  color: var(--text-primary);
}

:root[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
}

:root[data-theme="light"] .skeleton-step,
:root[data-theme="light"] .skeleton-platform {
  background: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 50%, #e8e8e8 75%);
}

/* Light mode send button */
:root[data-theme="light"] .send-button {
  background: linear-gradient(45deg, var(--primary, #ff7b00), #ff9533);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(255, 123, 0, 0.3);
}

:root[data-theme="light"] .send-button:hover:not(:disabled) {
  background: linear-gradient(45deg, #e56b00, #ff7b00);
  box-shadow: 0 12px 40px rgba(255, 123, 0, 0.5);
}

:root[data-theme="light"] .send-button:disabled {
  background: #cccccc;
  color: #666666;
}

/* Light mode platform selection */
:root[data-theme="light"] .platform.selected {
  border-color: var(--primary, #ff7b00);
  background: rgba(255, 123, 0, 0.1);
  box-shadow: 0 6px 20px rgba(255, 123, 0, 0.3);
}

/* Light mode platform status */
:root[data-theme="light"] .platform-status {
  color: #666666;
}

/* Light mode success animation */
:root[data-theme="light"] .share-success {
  background: linear-gradient(135deg, var(--primary, #ff7b00), #ff9533);
  color: #ffffff;
  box-shadow: 0 20px 60px rgba(255, 123, 0, 0.4);
}

/* Light mode main dashboard background */
:root[data-theme="light"] .creator-dashboard {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f1f3f4 100%);
  color: #1a1a1a;
}

/* Light mode workflow steps and platforms containers */
:root[data-theme="light"] .workflow-steps {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

:root[data-theme="light"] .platforms {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

/* Light mode step and platform text */
:root[data-theme="light"] .step-title,
:root[data-theme="light"] .platform-name {
  color: #1a1a1a;
  font-weight: 600;
}

:root[data-theme="light"] .step-icon,
:root[data-theme="light"] .platform-icon {
  filter: brightness(0.8);
}

/* Light mode drop area */
:root[data-theme="light"] .drop-area {
  background: rgba(255, 255, 255, 0.95);
  border: 2px dashed rgba(255, 123, 0, 0.3);
  backdrop-filter: blur(10px);
}

:root[data-theme="light"] .drop-title {
  color: #1a1a1a;
  font-weight: 700;
}

:root[data-theme="light"] .drop-subtitle {
  color: #6b7280;
}

/* Light mode step arrows */
:root[data-theme="light"] .step-arrow {
  color: var(--primary, #ff7b00);
  font-weight: bold;
}

/* Light mode skeleton loading */
:root[data-theme="light"] .skeleton-workflow-steps,
:root[data-theme="light"] .skeleton-platforms {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .skeleton-drop-area {
  background: linear-gradient(90deg, #f8f9fa 25%, #f1f3f4 50%, #f8f9fa 75%);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .step.clickable:hover,
  .platform:hover {
    border-width: 3px;
    border-color: var(--text-primary, #ffffff);
  }

  .send-button {
    border: 2px solid var(--text-primary, #ffffff);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .workflow-steps {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
  }

  .step {
    min-width: 80px;
    padding: 0.75rem;
  }

  .step-icon {
    font-size: 1.5rem;
  }

  .step-title {
    font-size: 0.75rem;
  }

  .step-arrow {
    font-size: 1.25rem;
  }

  .platforms {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .platform {
    min-width: 100px;
    padding: 1rem 1.5rem;
  }

  .drop-title {
    font-size: 2rem;
  }

  .drop-subtitle {
    font-size: 1.25rem;
  }
}
/* packages/frontend/src/index.css */

/* Import modal theme for consistent modal styling */

/**
 * Modal Theme Variables
 * 
 * Centralized CSS variables for consistent modal styling across the application.
 * This fixes transparency issues and provides a unified design system.
 */

:root {
  /* Z-Index Management */
  --z-index-modal: 1000;
  --z-index-modal-high: 1050;
  --z-index-modal-critical: 1100;
  --z-index-tooltip: 1200;
  --z-index-notification: 1300;

  /* Modal Animations */
  --modal-animation-duration: 0.3s;
  --modal-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --modal-scale-from: 0.95;
  --modal-scale-to: 1;

  /* Modal Sizes */
  --modal-max-width-small: 400px;
  --modal-max-width-medium: 600px;
  --modal-max-width-large: 800px;
  --modal-max-width-xlarge: 1200px;
  --modal-border-radius: 8px;

  /* Form Elements */
  --modal-input-padding: 8px 12px;
  --modal-input-border-radius: 6px;

  /* Dark Theme - Default for Everything Studio */
  /* Modal Backdrop */
  --modal-backdrop-color: rgba(0, 0, 0, 0.8);
  --modal-backdrop-blur: 6px;
  --modal-backdrop-transition: all 0.3s ease;

  /* Modal Container */
  --modal-background: #1e293b;
  --modal-text-color: #f1f5f9;
  --modal-border-color: #334155;
  --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

  /* Modal Header */
  --modal-header-background: #1e293b;
  --modal-header-border: 1px solid #334155;
  --modal-header-padding: 20px 24px;
  --modal-title-color: #f1f5f9;
  --modal-title-size: 1.25rem;
  --modal-title-weight: 600;

  /* Modal Body */
  --modal-body-background: #1e293b;
  --modal-body-padding: 24px;
  --modal-body-max-height: calc(100vh - 200px);

  /* Modal Footer */
  --modal-footer-background: var(--bg-darker);
  --modal-footer-border: 1px solid var(--border-color);
  --modal-footer-padding: 16px 24px;

  /* Modal Buttons */
  --modal-button-primary-bg: var(--primary);
  --modal-button-primary-color: #ffffff;
  --modal-button-primary-hover: var(--primary-light);
  --modal-button-primary-bg-hover: rgba(var(--primary-rgb), 0.1);
  --modal-button-secondary-bg: transparent;
  --modal-button-secondary-color: #94a3b8;
  --modal-button-secondary-border: 1px solid #475569;
  --modal-button-secondary-hover: #334155;
  --modal-button-danger-bg: #f87171;
  --modal-button-danger-color: #ffffff;
  --modal-button-danger-hover: #ef4444;

  /* Modal Surface */
  --modal-surface-color: #334155;

  /* Form Elements */
  --modal-input-background: #334155;
  --modal-input-border: 1px solid #475569;
  --modal-input-border-focus: 1px solid #818cf8;
  --modal-input-text: #f1f5f9;
  --modal-input-placeholder: #94a3b8;
}

/* Light Theme Override */

[data-theme="light"],
.light-theme {
  /* Modal Backdrop */
  --modal-backdrop-color: rgba(0, 0, 0, 0.6);
  --modal-backdrop-blur: 4px;

  /* Modal Container */
  --modal-background: #ffffff;
  --modal-text-color: #1e293b;
  --modal-border-color: #e2e8f0;
  --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Modal Header */
  --modal-header-background: #ffffff;
  --modal-header-border: 1px solid #e2e8f0;
  --modal-title-color: #1e293b;

  /* Modal Body */
  --modal-body-background: #ffffff;

  /* Modal Footer */
  --modal-footer-background: var(--bg-darker);
  --modal-footer-border: 1px solid var(--border-color);

  /* Modal Buttons */
  --modal-button-primary-bg: var(--primary);
  --modal-button-primary-hover: var(--primary-dark);
  --modal-button-primary-bg-hover: rgba(var(--primary-rgb), 0.1);
  --modal-button-secondary-bg: transparent;
  --modal-button-secondary-color: #6b7280;
  --modal-button-secondary-border: 1px solid #d1d5db;
  --modal-button-secondary-hover: #f3f4f6;
  --modal-button-danger-bg: #ef4444;
  --modal-button-danger-hover: #dc2626;

  /* Modal Surface */
  --modal-surface-color: #f8fafc;

  /* Form Elements */
  --modal-input-background: #ffffff;
  --modal-input-border: 1px solid #d1d5db;
  --modal-input-border-focus: 1px solid #6366f1;
  --modal-input-text: #374151;
  --modal-input-placeholder: #9ca3af;
}

/* Modal Base Classes */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  background-color: var(--modal-backdrop-color);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  transition: var(--modal-backdrop-transition);
  padding: 16px;
}

.modal-container {
  background-color: var(--modal-background);
  color: var(--modal-text-color);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  border: 1px solid var(--modal-border-color);
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalEnter var(--modal-animation-duration) var(--modal-animation-easing);
}

.modal-container.small {
  max-width: var(--modal-max-width-small);
}

.modal-container.medium {
  max-width: var(--modal-max-width-medium);
}

.modal-container.large {
  max-width: var(--modal-max-width-large);
}

.modal-container.xlarge {
  max-width: var(--modal-max-width-xlarge);
}

.modal-header {
  background-color: var(--modal-header-background);
  border-bottom: var(--modal-header-border);
  padding: var(--modal-header-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  color: var(--modal-title-color);
  font-size: var(--modal-title-size);
  font-weight: var(--modal-title-weight);
  margin: 0;
}

.modal-body {
  background-color: var(--modal-body-background);
  padding: var(--modal-body-padding);
  flex: 1;
  overflow-y: auto;
  max-height: var(--modal-body-max-height);
}

.modal-footer {
  background-color: var(--modal-footer-background);
  border-top: var(--modal-footer-border);
  padding: var(--modal-footer-padding);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* Modal Buttons */

.modal-button {
  padding: var(--modal-input-padding);
  border-radius: var(--modal-input-border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-size: 14px;
}

.modal-button.primary {
  background-color: var(--modal-button-primary-bg);
  color: var(--modal-button-primary-color);
}

.modal-button.primary:hover {
  background-color: var(--modal-button-primary-hover);
}

.modal-button.secondary {
  background-color: var(--modal-button-secondary-bg);
  color: var(--modal-button-secondary-color);
  border: var(--modal-button-secondary-border);
}

.modal-button.secondary:hover {
  background-color: var(--modal-button-secondary-hover);
}

.modal-button.danger {
  background-color: var(--modal-button-danger-bg);
  color: var(--modal-button-danger-color);
}

.modal-button.danger:hover {
  background-color: var(--modal-button-danger-hover);
}

/* Modal Form Elements */

.modal-field {
  margin-bottom: 20px;
}

.modal-label {
  display: block;
  color: var(--modal-text-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.modal-input {
  background-color: var(--modal-input-background);
  border: var(--modal-input-border);
  color: var(--modal-input-text);
  padding: var(--modal-input-padding);
  border-radius: var(--modal-input-border-radius);
  width: 100%;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.modal-input:focus {
  outline: none;
  border: var(--modal-input-border-focus);
}

.modal-input::placeholder {
  color: var(--modal-input-placeholder);
}

/* Animations */

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(var(--modal-scale-from));
  }
  to {
    opacity: 1;
    transform: scale(var(--modal-scale-to));
  }
}

@keyframes modalExit {
  from {
    opacity: 1;
    transform: scale(var(--modal-scale-to));
  }
  to {
    opacity: 0;
    transform: scale(var(--modal-scale-from));
  }
}

/* Responsive Design */

@media (max-width: 640px) {
  .modal-overlay {
    padding: 8px;
  }
  
  .modal-header {
    padding: 16px;
  }
  
  .modal-body {
    padding: 16px;
  }
  
  .modal-footer {
    padding: 12px 16px;
  }
}

/* Global Theme Variables */

:root {
  /* Base scrollbar */
  --scrollbar-width: 4px;
  --scrollbar-thumb-color: #3c3c3c;
  --scrollbar-track-color: transparent;

  /* Dark Theme (Default) */
  --bg-darkest: #1e1e1e;
  --bg-darker: #252526;
  --bg-medium: #333333;
  --bg-lighter: #3c3c3c;
  --bg-hover: #2a2d2e;
  --bg-selected: #383838;
  --text-primary: #ffffff;
  --text-primary-rgb: 255, 255, 255;
  --text-secondary: #cccccc;
  --text-tertiary: #999999;
  --text-disabled: #666666;
  --border-color: #3c3c3c;
  --border-primary: #444444;
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --primary-darker: #3730a3;
  --primary-rgb: 99, 102, 241;

  /* Accent color aliases for consistency */
  --accent-color: var(--primary);
  --accent-color-light: var(--primary-light);
  --accent-color-dark: var(--primary-dark);
  --accent-color-rgb: var(--primary-rgb);
  --accent-color-alpha: rgba(var(--primary-rgb), 0.1);
  --text-on-primary: #ffffff;
  --bg-danger: #ff5555;
  --bg-success: #10b981;

  /* Surface colors for consistent theming */
  --bg-surface-1: #1e1e1e;
  --bg-surface-2: #252526;
  --bg-surface-3: #2d2d2d;
  --bg-surface-4: #3d3d3d;

  /* VSCode-like Defaults (Dark Theme Base) */
  --vscode-editorWidget-background: #1e1e1e;
  --vscode-editor-foreground: #cccccc;
  --vscode-foreground: #cccccc;
  --vscode-descriptionForeground: #8e8e8e;
  --vscode-icon-foreground: #cccccc;
  --vscode-editorGroupHeader-tabsBackground: #252526;
  --vscode-editorGroupHeader-tabsBorder: #202020;
  --vscode-tab-inactiveForeground: var(--text-secondary);
  --vscode-tab-activeForeground: var(--vscode-editor-foreground);
  --vscode-tab-activeBorderTop: var(--primary, #ff7b00);
  --vscode-list-hoverBackground: #2a2d2e;
  --vscode-list-hoverForeground: #cccccc;
  --vscode-toolbar-hoverBackground: #383838;
  --vscode-toolbar-activeBackground: var(--primary, #ff7b00);
  --vscode-toolbar-activeForeground: #ffffff;
  --vscode-sash-hoverBorder: var(--primary-light, rgba(255, 123, 0, 0.6));
  --vscode-focusBorder: var(--primary, #ff7b00);

  /* Spacing & Sizing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --radius-sm: 3px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 16px;

  /* Scrollbar Specifics */
  --vscode-scrollbarSlider-background: #424242;
  --vscode-scrollbarSlider-hoverBackground: #505050;
}

/* Light Theme Overrides */

:root[data-theme="light"] {
  --bg-darkest: #ffffff;
  --bg-darker: #f3f3f3;
  --bg-medium: #e7e7e7;
  --bg-lighter: #dcdcdc;
  --bg-hover: #e8e8e8;
  --bg-selected: #dcdcdc;
  --text-primary: #333333;
  --text-primary-rgb: 51, 51, 51;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-disabled: #aaaaaa;
  --border-color: #cccccc;
  --border-primary: #e7e7e7;
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --primary-darker: #3730a3;
  --primary-rgb: 99, 102, 241;

  /* Accent color aliases for consistency */
  --accent-color: var(--primary);
  --accent-color-light: var(--primary-light);
  --accent-color-dark: var(--primary-dark);
  --accent-color-rgb: var(--primary-rgb);
  --accent-color-alpha: rgba(var(--primary-rgb), 0.1);
  --text-on-primary: #ffffff;
  --bg-danger: #e51400;
  --bg-success: #10b981;

  /* Surface colors for light theme */
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f3f3f3;
  --bg-surface-3: #e8e8e8;
  --bg-surface-4: #dcdcdc;

  /* Light theme specific variables */
  --bg-surface-1-light: #ffffff;
  --bg-surface-2-light: #f3f3f3;
  --bg-surface-3-light: #e8e8e8;
  --bg-surface-4-light: #dcdcdc;
  --text-primary-light: #333333;
  --text-secondary-light: #666666;
  --border-primary-light: #e7e7e7;

  --vscode-editorWidget-background: #ffffff;
  --vscode-editor-foreground: #333333;
  --vscode-foreground: #333333;
  --vscode-descriptionForeground: #777777;
  --vscode-icon-foreground: #4f4f4f;
  --vscode-editorGroupHeader-tabsBackground: #f3f3f3;
  --vscode-editorGroupHeader-tabsBorder: #e7e7e7;
  --vscode-tab-inactiveForeground: var(--text-secondary);
  --vscode-tab-activeForeground: var(--vscode-editor-foreground);
  --vscode-tab-activeBorderTop: var(--primary);
  --vscode-list-hoverBackground: #e8e8e8;
  --vscode-list-hoverForeground: #202124;
  --vscode-toolbar-hoverBackground: #e8e8e8;
  --vscode-toolbar-activeBackground: var(--primary);
  --vscode-toolbar-activeForeground: #ffffff;
  --vscode-sash-hoverBorder: rgba(255, 123, 0, 0.4);
  --vscode-scrollbarSlider-background: #bbbbbb;
  --vscode-scrollbarSlider-hoverBackground: #999999;
}

/* Reset and base styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  /* Removed height: 100% to allow proper grid resizing */
  width: 100%;
  overflow: auto; /* Allow scrolling when needed */
  min-height: 100vh; /* Use min-height instead of fixed height */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--bg-darkest);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply scrollbar styling to all scrollable elements */

::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: calc(var(--scrollbar-width) / 2);
}

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

/* Standard scrollbar for Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Disable blue highlight on mobile touch */

* {
  -webkit-tap-highlight-color: transparent;
}

#root {
  /* Removed height: 100% to allow proper grid resizing */
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto; /* Allow scrolling when needed */
  min-height: 100vh; /* Use min-height instead of fixed height */
}

.app-container {
  /* Removed height: 100% to allow proper grid resizing */
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-darkest);
  color: var(--text-primary);
  flex: 1 1 auto; /* Allow growing and shrinking */
  min-height: 0; /* Allow shrinking below natural height */
}

/* ===== COMPREHENSIVE FOCUS MANAGEMENT ===== */

/* Remove default browser focus outlines for mouse/touch users */

*:focus {
  outline: none;
}

/* Only show focus outlines for keyboard navigation */

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove focus outlines from interactive elements that have visual feedback */

button:focus,
.tab-button:focus,
.friend-card:focus,
.message-card:focus,
.search-card:focus,
.glass-button:focus,
.activity-bar-item:focus,
.nav-item:focus,
[role="tab"]:focus,
[role="button"]:focus,
.clickable:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Keep focus visible for form inputs and accessibility-critical elements */

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Utility class for components that should never show focus outlines */

.no-focus-outline,
.no-focus-outline:focus,
.no-focus-outline:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Apply to common interactive elements that have visual feedback */

.card,
.panel,
.tab,
.menu-item,
.dropdown-item,
.list-item {
  outline: none !important;
}

.card:focus,
.panel:focus,
.tab:focus,
.menu-item:focus,
.dropdown-item:focus,
.list-item:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Dark mode specific focus outline removal for tabs and friends */

:root[data-theme="dark"] .friends-panel button,
:root[data-theme="dark"] .friends-panel [role="tab"],
:root[data-theme="dark"] .friends-panel .tab-button,
:root[data-theme="dark"] .friends-panel .tab-item,
:root[data-theme="dark"] .tab-button,
:root[data-theme="dark"] .tab-item,
:root[data-theme="dark"] [role="tab"] {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

:root[data-theme="dark"] .friends-panel button:focus,
:root[data-theme="dark"] .friends-panel [role="tab"]:focus,
:root[data-theme="dark"] .friends-panel .tab-button:focus,
:root[data-theme="dark"] .friends-panel .tab-item:focus,
:root[data-theme="dark"] .tab-button:focus,
:root[data-theme="dark"] .tab-item:focus,
:root[data-theme="dark"] [role="tab"]:focus,
:root[data-theme="dark"] .friends-panel button:focus-visible,
:root[data-theme="dark"] .friends-panel [role="tab"]:focus-visible,
:root[data-theme="dark"] .friends-panel .tab-button:focus-visible,
:root[data-theme="dark"] .friends-panel .tab-item:focus-visible,
:root[data-theme="dark"] .tab-button:focus-visible,
:root[data-theme="dark"] .tab-item:focus-visible,
:root[data-theme="dark"] [role="tab"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Layout specific styles */

.layout-container {
  display: flex;
  flex-direction: column;
  /* Removed height: 100% to allow proper grid resizing */
  width: 100%;
  overflow: hidden;
  min-height: 100vh; /* Use min-height instead of fixed height */
}

.middle-area {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.main-area-with-sidebar {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.sidebar-effectively-collapsed {
  margin-left: 0;
}

/* Smooth transitions for theme changes */

html.ready {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Remove forced theme background rules */

body, .app-container {
  background-color: var(--bg-darkest);
  color: var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Anti-flicker classes */

.theme-transition * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* Prevent layout shift during loading */

.loading-stabilizer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Smooth auth state transitions */

.auth-transition {
  transition: opacity 0.15s ease-in-out;
}

.auth-transition.loading {
  opacity: 0.7;
}

/* Prevent sidebar flicker */

.sidebar-transition {
  transition: width 0.2s ease, margin-left 0.2s ease;
}

/* Prevent content jump during project loading */

.project-loading {
  min-height: calc(100vh - 60px); /* Account for header */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== ACCESSIBILITY STYLES ===== */

/* Text scaling support */

.large-text {
  font-size: calc(1em * var(--font-size-multiplier, 1.25));
}

.large-text h1 { font-size: calc(2rem * var(--font-size-multiplier, 1.25)); }

.large-text h2 { font-size: calc(1.5rem * var(--font-size-multiplier, 1.25)); }

.large-text h3 { font-size: calc(1.25rem * var(--font-size-multiplier, 1.25)); }

.large-text button { font-size: calc(1rem * var(--font-size-multiplier, 1.25)); }

.large-text input { font-size: calc(1rem * var(--font-size-multiplier, 1.25)); }

/* High contrast mode */

.high-contrast {
  filter: contrast(150%);
}

.high-contrast * {
  border-color: var(--border-color) !important;
  outline: 2px solid transparent;
}

.high-contrast button:focus,
.high-contrast input:focus,
.high-contrast select:focus,
.high-contrast textarea:focus {
  outline: 3px solid var(--primary) !important;
  outline-offset: 2px;
}

/* Reduced motion */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: var(--animation-duration, 0.01ms) !important;
  animation-iteration-count: 1 !important;
  transition-duration: var(--transition-duration, 0.01ms) !important;
  scroll-behavior: auto !important;
}

/* Respect system preference for reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Line height adjustments */

:root {
  --line-height-base: 1.5;
}

body {
  line-height: var(--line-height-base);
}

p, div, span {
  line-height: var(--line-height-base);
}

/* Touch friendly mode */

.touch-friendly button,
.touch-friendly input,
.touch-friendly select,
.touch-friendly textarea,
.touch-friendly .clickable {
  min-height: var(--touch-target-size, 44px);
  min-width: var(--touch-target-size, 44px);
  padding: var(--button-padding, 12px 16px);
}

.touch-friendly .toggle-switch {
  min-height: var(--touch-target-size, 44px);
  min-width: calc(var(--touch-target-size, 44px) * 1.5);
}

/* Color blind friendly patterns */

.colorblind-friendly .status-success::before {
  content: "✓ ";
}

.colorblind-friendly .status-error::before {
  content: "✗ ";
}

.colorblind-friendly .status-warning::before {
  content: "⚠ ";
}

.colorblind-friendly .status-info::before {
  content: "ℹ ";
}

/* Enhanced focus indicators for keyboard navigation */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Screen reader only content */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== EDITOR SETTINGS ===== */

/* Editor font variables */

:root {
  --editor-font-family: 'Menlo, Monaco, Consolas, monospace';
  --editor-font-size: 14px;
  --editor-tab-size: 2;
  --editor-line-height: 1.5;
}

/* Apply editor font settings to Monaco Editor */

.monaco-editor,
.monaco-editor .view-lines,
.monaco-editor .view-line {
  font-family: var(--editor-font-family) !important;
  font-size: var(--editor-font-size) !important;
  line-height: var(--editor-line-height) !important;
}

/* Apply tab size */

.monaco-editor .view-lines {
  tab-size: var(--editor-tab-size);
  -moz-tab-size: var(--editor-tab-size);
}

/* Apply to CodeMirror editors */

.cm-editor,
.cm-content,
.cm-line {
  font-family: var(--editor-font-family) !important;
  font-size: var(--editor-font-size) !important;
  line-height: var(--editor-line-height) !important;
}

/* Apply to any other code elements */

code, pre, .code-editor, .text-editor {
  font-family: var(--editor-font-family);
  font-size: var(--editor-font-size);
  line-height: var(--editor-line-height);
}

/* Word wrap classes */

.editor-word-wrap .monaco-editor .view-lines {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.editor-word-wrap .cm-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ===== PERFORMANCE SETTINGS ===== */

/* Hardware acceleration */

.hardware-acceleration * {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.hardware-acceleration .monaco-editor,
.hardware-acceleration .cm-editor {
  will-change: scroll-position;
  transform: translateZ(0);
}

/* Limit animations */

.limit-animations * {
  animation-duration: calc(var(--animation-speed, 1) * 1s) !important;
  transition-duration: calc(var(--animation-speed, 1) * 0.2s) !important;
}

/* High quality rendering */

.high-quality-rendering img,
.high-quality-rendering canvas,
.high-quality-rendering svg {
  image-rendering: var(--image-rendering, high-quality);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Optimize images */

.optimize-images img {
  image-rendering: auto;
  image-rendering: optimizeSpeed;
}

.optimize-images img[src$=".jpg"],
.optimize-images img[src$=".jpeg"],
.optimize-images img[src$=".png"] {
  image-rendering: auto;
}

/* ===== FILE EXPLORER SETTINGS ===== */

/* View mode styles */

[data-file-view-mode="list"] .file-tree-node {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-color);
}

[data-file-view-mode="grid"] .file-tree-node {
  display: inline-block;
  width: 120px;
  height: 100px;
  margin: 8px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

[data-file-view-mode="tree"] .file-tree-node {
  display: block;
  padding: 2px 0;
}

/* Hidden files */

.show-hidden-files .file-tree-node[data-hidden="true"] {
  display: block;
  opacity: 0.6;
}

:not(.show-hidden-files) .file-tree-node[data-hidden="true"] {
  display: none;
}

/* File extensions */

.show-file-extensions .file-extension {
  display: inline;
}

:not(.show-file-extensions) .file-extension {
  display: none;
}

/* File sizes */

.show-file-size .file-size {
  display: inline;
  color: var(--text-secondary);
  font-size: 0.85em;
  margin-left: 8px;
}

:not(.show-file-size) .file-size {
  display: none;
}

/* Thumbnails */

.show-thumbnails .file-thumbnail {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

:not(.show-thumbnails) .file-thumbnail {
  display: none;
}

/* Folders first sorting */

.folders-first .file-tree-node[data-is-folder="true"] {
  order: -1;
}

.folders-first .file-tree-node[data-is-folder="false"] {
  order: 1;
}

/* Sort indicators - using proper arrow symbols */

[data-file-sort-direction="desc"] .sort-indicator::after {
  content: " ▼";
}

[data-file-sort-direction="asc"] .sort-indicator::after {
  content: " ▲";
}

/* ===== KEYBOARD SHORTCUTS & AUTO-SAVE ===== */

/* Vim mode indicators */

.vim-mode .editor-cursor {
  background-color: var(--primary);
  animation: vim-blink 1s infinite;
}

@keyframes vim-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Emacs mode indicators */

.emacs-mode .editor-status::after {
  content: " [Emacs]";
  color: var(--primary);
  font-size: 0.8em;
}

/* Shortcut hints */

.show-shortcut-hints [data-shortcut]::after {
  content: attr(data-shortcut);
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-darker);
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.7em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 1000;
}

.show-shortcut-hints [data-shortcut]:hover::after {
  opacity: 1;
}

/* Auto-save indicators */

.auto-save-enabled .editor-status::before {
  content: "🔄 ";
  color: var(--success);
  animation: auto-save-pulse 2s infinite;
}

@keyframes auto-save-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.auto-save-enabled .file-modified::after {
  content: " (auto-saving...)";
  color: var(--text-secondary);
  font-size: 0.8em;
}

/* Key repeat delay */

:root {
  --key-repeat-delay: 200ms;
}

input, textarea, [contenteditable] {
  transition: all var(--key-repeat-delay);
}

/* Notification styles */

.notification-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: var(--z-index-notification, 9999);
  max-width: 300px;
  animation: notification-slide-in 0.3s ease-out;
}

@keyframes notification-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification-toast.success {
  border-left: 4px solid var(--success);
}

.notification-toast.error {
  border-left: 4px solid var(--error);
}

.notification-toast.warning {
  border-left: 4px solid var(--warning);
}

.notification-toast.info {
  border-left: 4px solid var(--primary);
}

/* ===== ACTIVITY BAR & SIDEBAR ACCENT COLOR INTEGRATION ===== */

/* Ensure all activity bar highlights use the accent color */

.activity-bar-item.active,
.domainItem.active {
  color: var(--primary) !important;
  background-color: var(--primary-light) !important;
}

.activity-bar-item.active::before,
.domainItem.active::before {
  background-color: var(--primary) !important;
}

/* Ensure all sidebar highlights use the accent color */

.sidebar-item.active,
.navItem.active,
.activeNavItem {
  color: var(--primary) !important;
  background-color: var(--primary-light) !important;
}

/* Tab highlights use accent color */

.tab.active,
.tab-item.active {
  border-top: 2px solid var(--primary) !important;
}

/* Project selector highlights */

.projectItem.active {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* Navigation item highlights */

.navItem.active,
.nav-item.active,
.menu-item.active {
  color: var(--primary) !important;
  background-color: var(--primary-light) !important;
}

/* Flowise navigation highlights */

.navItem.active {
  color: var(--primary) !important;
  background-color: var(--primary-light) !important;
}

/* General active state for any navigation */

[class*="nav"].active,
[class*="item"].active,
[class*="button"].active {
  color: var(--primary) !important;
}

/* Focus states also use accent color */

button:focus-visible,
.nav-item:focus-visible,
.activity-bar-item:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
}

/* Selection highlights */

::selection {
  background-color: var(--primary-light);
  color: var(--primary);
}

/* Light mode selection highlights */

:root[data-theme="light"] ::selection {
  background-color: rgba(255, 123, 0, 0.2);
  color: #1a1a1a;
}

/* Scrollbar thumb uses accent color */

::-webkit-scrollbar-thumb:hover {
  background: var(--primary) !important;
}

/* Link colors use accent color */

a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-dark);
}

/* Button primary styles */

.btn-primary,
.button-primary,
button.primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-primary:hover,
.button-primary:hover,
button.primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* Global animations */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
  /* Force animation to continue when tab is not visible */
  animation-play-state: running !important;
  /* Use transform-based animation for better performance */
  will-change: transform;
  /* Ensure animation continues in background */
  animation-fill-mode: forwards;
}

/* Alternative spinning animation that works better across tab switches */

.animate-spin-persistent {
  animation: spinPersistent 1s linear infinite;
  will-change: transform;
  animation-fill-mode: forwards;
  animation-play-state: running !important;
  /* Force GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Prevent animation from pausing */
  animation-duration: 1s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* Force animation to continue even when tab is not visible */

.animate-spin-persistent,
.animate-spin-persistent * {
  animation-play-state: running !important;
}

@keyframes spinPersistent {
  0% {
    transform: translateZ(0) rotate(0deg);
  }
  25% {
    transform: translateZ(0) rotate(90deg);
  }
  50% {
    transform: translateZ(0) rotate(180deg);
  }
  75% {
    transform: translateZ(0) rotate(270deg);
  }
  100% {
    transform: translateZ(0) rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Workflow Node Active States */

.workflow-node.currently-active,
.es-workflow-node.currently-active,
.block-protocol-node.currently-active {
  animation: nodeActiveGlow 2s ease-in-out infinite;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6) !important;
  transform: scale(1.02);
  z-index: 1000 !important;
}

@keyframes nodeActiveGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
  }
}

/* Wire Flow Animation */

.react-flow__edge.active-flow .react-flow__edge-path {
  stroke-dasharray: 5;
  animation: wireFlow 1s linear infinite;
}

@keyframes wireFlow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -10;
  }
}

/* Enhanced active node indicator */

.workflow-node.currently-active::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #3b82f6;
  border-radius: inherit;
  animation: activeNodeBorder 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes activeNodeBorder {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}