/**
 * Styles pour le générateur de code HTML
 * Interface moderne avec éditeur et prévisualisation côte à côte
 */

/* ===================================
   WELCOME OVERLAY
   =================================== */

#home {
  position: relative;
}

.welcome-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.welcome-content {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

.welcome-header {
  text-align: center;
  width: 100%;
}

.welcome-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-on-surface);
  margin-bottom: 0.5rem;
}

.welcome-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
}

.welcome-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
}

.welcome-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 1rem;
}

.welcome-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.welcome-guide-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .welcome-overlay {
    padding: 1.5rem 1rem;
  }

  .welcome-content {
    gap: 2rem;
  }

  .welcome-title {
    font-size: 2rem;
  }

  .welcome-subtitle {
    font-size: 1rem;
  }

  .welcome-options {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .welcome-option {
    padding: 1.5rem;
  }

  .option-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .welcome-footer {
    padding-top: 0.5rem;
  }

  .welcome-guide-btn {
    width: 100%;
    max-width: 100%;
  }
}

.welcome-option {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
  display: block;
  text-align: left;
  overflow: hidden;
  position: relative;
  min-height: 120px;
}

.welcome-option:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.welcome-option:active {
  transform: translateY(-2px);
}

.option-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* First/Second card effect (inspired by first_second_card.css) */
.welcome-option .first-content,
.welcome-option .second-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}

.welcome-option .first-content {
  position: relative;
  width: 100%;
  transition: all 0.4s ease;
  opacity: 1;
  transform: translateY(0);
  z-index: 2;
  min-height: 100px;
}

.welcome-option:hover .first-content {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  transform: translateY(-20px);
  overflow: hidden;
}

.welcome-option .second-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.4s ease;
  transform: translateY(30px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.welcome-option:hover .second-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text-on-surface);
  margin: 0;
}

.option-content p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.option-arrow {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
}

.welcome-close {
  align-self: center;
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text-on-surface);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.welcome-close:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

.btn-back-to-welcome {
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text-on-surface);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
}

.btn-back-to-welcome:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

.code-generator-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.25rem 0 0 0;
  margin-bottom: 0.25rem;
}

.code-generator-header .header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.code-generator-header .header-text {
  flex: 1;
}

.code-generator-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-on-surface);
  margin-bottom: 0.25rem;
}

.code-generator-subtitle {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* ===================================
   CODE GENERATOR SECTION
   =================================== */

.code-generator-section {
  width: 100%;
  max-width: 100%;
  height: calc(100vh - 80px); /* Prendre toute la hauteur de l'écran moins la barre du haut */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
  padding-top: 0; /* Pas de padding en haut */
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.3s ease; /* Transition fluide pour les ajustements */
}

/* ===================================
   CONTENT LAYOUT
   =================================== */

.code-generator-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: grid-template-columns 0.3s ease;
}

/* Quand l'éditeur est masqué, afficher uniquement l'aperçu en plein écran */
.code-generator-content.editor-hidden {
  grid-template-columns: 1fr;
}

/* Masquer l'éditeur */
#editor-panel.hidden {
  display: none;
}

/* Bouton "Afficher l'éditeur" - masqué par défaut, visible quand l'éditeur est masqué */
#generator-show-editor-btn {
  display: none;
}

/* Le bouton s'affiche automatiquement via JavaScript quand l'éditeur est masqué */

/* ===================================
   PANELS (Editor & Preview)
   =================================== */

.generator-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  min-height: 40px;
  position: relative;
  z-index: 100;
}

.panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-on-surface);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.panel-title i {
  color: var(--color-button);
}

.panel-actions {
  display: flex;
  gap: 0.5rem;
  position: relative;
  z-index: 10003;
}

.btn-panel {
  padding: 0.4rem 0.65rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.btn-panel:hover {
  background: var(--color-button);
  color: var(--color-button-text);
  border-color: var(--color-button);
  transform: translateY(-1px);
}

/* Animation pour le bouton sanitized */
.btn-panel.sanitized {
  animation: sanitizePulse 0.6s ease;
}

@keyframes sanitizePulse {
  0%, 100% {
    background: transparent;
    border-color: var(--color-border);
  }
  50% {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-on-primary);
  }
}

/* Animation pour le bouton saved */
.btn-panel.saved {
  animation: savePulse 0.6s ease;
}

@keyframes savePulse {
  0%, 100% {
    background: transparent;
    border-color: var(--color-border);
  }
  50% {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
  }
}

/* Menu déroulant pour charger les codes HTML */
.generator-html-selector-wrapper {
  position: relative;
  z-index: 10002;
}

.generator-html-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  max-width: 400px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 10001;
  display: none;
}

.generator-html-dropdown.active {
  display: block;
}

.generator-html-dropdown-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-on-surface);
}

.generator-html-group-item {
  cursor: pointer;
  transition: background 0.2s ease;
}

.generator-html-group-header {
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--color-text-on-surface);
}

.generator-html-group-item:hover {
  background: var(--color-surface-alt);
}

.generator-html-group-item.active {
  background: var(--color-button);
  color: var(--color-button-text);
}

.generator-html-group-item.active .generator-html-group-header {
  color: white;
}

.generator-html-submenu {
  display: none;
  background: var(--bg-secondary);
}

.generator-html-group-item.active .generator-html-submenu {
  display: block;
}

.generator-html-note-item {
  padding: 0.5rem 1rem 0.5rem 2rem;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 0.8rem;
  color: var(--color-text-on-surface);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  box-sizing: border-box;
}

.generator-html-note-item:hover {
  background: var(--color-surface-alt);
}

.generator-html-note-item i {
  font-size: 0.75rem;
}

.generator-html-note-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-content {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===================================
   ACE EDITOR
   =================================== */

.ace-editor {
  width: 100%;
  max-width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  box-sizing: border-box;
}

/* ===================================
   PREVIEW IFRAME
   =================================== */

.preview-container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  border: none;
  background: white;
  box-sizing: border-box;
}

/* ===================================
   GENERATION STATUS
   =================================== */

.generation-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: all 0.3s ease;
}

.status-indicator.active {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  animation: pulse 2s infinite;
}

.status-indicator.error {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===================================
   PROMPT INPUT AREA (Bottom Bar)
   =================================== */

.code-generator-section::after {
  content: '';
  display: block;
  height: 95px; /* Space for fixed bottom bar */
}

/* Ajuster l'espace quand la barre de validation est visible */
.html-validation-bar ~ .generator-prompt-bar ~ .code-generator-section::after,
.code-generator-section:has(+ .html-validation-bar)::after {
  height: 155px; /* Space for both validation bar (60px) and prompt bar (95px) */
}

/* Alternative: utiliser une classe dynamique ajoutée par JS */
.code-generator-section.has-validation-bar::after {
  height: 155px;
}

.generator-prompt-bar {
  position: fixed;
  bottom: 0;
  left: 260px; /* Sidebar width */
  right: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.99));
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  padding: 0.6rem 1.25rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 2100;
  transition: left 0.3s ease; /* Transition fluide pour le left */
  display: none; /* Hidden by default, shown by JS */
}

/* When sidebar is collapsed - utiliser le sélecteur correct */
.sidebar.collapsed ~ .main-container .generator-prompt-bar {
  left: 0 !important; /* Quand la sidebar est rétractée, prendre toute la largeur */
}

/* Alternative: utiliser le sélecteur body si la structure est différente */
body.sidebar-collapsed .generator-prompt-bar {
  left: 0 !important;
}

/* Sélecteur plus direct pour forcer l'ajustement */
.sidebar.collapsed .generator-prompt-bar {
  left: 0 !important;
}

/* Support des thèmes */
[data-theme="dark"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.95), rgba(30, 30, 30, 0.98));
  border-top-color: var(--color-border);
  color: var(--color-text-on-surface);
}

[data-theme="light"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.99));
  border-top-color: var(--color-border);
  color: var(--color-text-on-surface);
}

/* Thème Bloomberg (bloom) - Barre de prompt sombre avec accent orange */
[data-theme="bloom"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.98), rgba(14, 14, 14, 0.99));
  border-top: 2px solid #ffae00;
  color: #ffae00;
  box-shadow: 0 -4px 20px rgba(255, 174, 0, 0.15);
}

/* Input dans le thème Bloomberg */
[data-theme="bloom"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #333333;
  color: #ffae00;
}

[data-theme="bloom"] #generator-prompt-input:hover {
  border-color: #4d4d4d;
}

[data-theme="bloom"] #generator-prompt-input:focus {
  border-color: #ffae00;
  box-shadow: 0 0 0 3px rgba(255, 174, 0, 0.2), 0 0 10px rgba(255, 174, 0, 0.3);
}

[data-theme="bloom"] #generator-prompt-input::placeholder {
  color: rgba(255, 174, 0, 0.4);
}

/* Boutons dans le thème Bloomberg */
[data-theme="bloom"] #generator-generate-btn {
  --primary: #ffae00;
  background: #ffae00;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(204, 138, 0, 0.6),
    0 5px 10px -2px rgba(255, 174, 0, 0.4),
    0 30px 25px -15px rgba(255, 174, 0, 0.25),
    inset 0 -2px 0 -1px rgba(61, 61, 61, 0.8),
    inset 0 0 2px 4px rgba(255, 201, 102, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="bloom"] #generator-generate-btn:hover:not(:disabled) {
  background: #ffc133;
  box-shadow:
    inset 0 0 25px rgba(204, 138, 0, 0.7),
    0 8px 20px rgba(255, 174, 0, 0.35),
    0 35px 28px -15px rgba(255, 174, 0, 0.35),
    inset 0 -2px 0 -1px rgba(61, 61, 61, 0.8),
    inset 0 0 2px 4px rgba(255, 201, 102, 0.8);
}

[data-theme="bloom"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(204, 138, 0, 0.5),
    0 2px 8px rgba(255, 174, 0, 0.25),
    inset 0 -2px 0 -1px rgba(61, 61, 61, 0.8),
    inset 0 0 2px 4px rgba(255, 201, 102, 0.8);
}

[data-theme="bloom"] #generator-generate-btn.generating {
  animation: bloom-pulse-glow 1.5s ease-in-out infinite;
}

@keyframes bloom-pulse-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 20px rgba(204, 138, 0, 0.6),
      0 5px 10px -2px rgba(255, 174, 0, 0.4),
      0 30px 25px -15px rgba(255, 174, 0, 0.25),
      inset 0 -2px 0 -1px rgba(61, 61, 61, 0.8),
      inset 0 0 2px 4px rgba(255, 201, 102, 0.8);
  }
  50% {
    box-shadow:
      inset 0 0 28px rgba(255, 174, 0, 0.7),
      0 5px 12px -2px rgba(255, 174, 0, 0.5),
      0 32px 32px -15px rgba(255, 174, 0, 0.35),
      inset 0 -2px 0 -1px rgba(61, 61, 61, 0.8),
      inset 0 0 2px 4px rgba(255, 218, 153, 0.8);
  }
}

/* Bouton clear dans Bloomberg */
[data-theme="bloom"] #generator-clear-btn-bottom {
  background: #1f1f1f;
  color: rgba(255, 174, 0, 0.85);
  border: 2px solid #333333;
}

[data-theme="bloom"] #generator-clear-btn-bottom:hover {
  background: #2d2d2d;
  border-color: #4d4d4d;
  color: #ffae00;
  box-shadow: 0 4px 12px rgba(255, 174, 0, 0.2);
}

/* Labels et sélecteurs Bloomberg */
[data-theme="bloom"] .group-select,
[data-theme="bloom"] .notes-select-btn {
  background: #1a1a1a;
  border: 2px solid #333333;
  color: #ffae00;
}

[data-theme="bloom"] .group-select:hover,
[data-theme="bloom"] .notes-select-btn:hover {
  border-color: #4d4d4d;
}

[data-theme="bloom"] .group-select:focus,
[data-theme="bloom"] .notes-select-btn:focus {
  border-color: #ffae00;
}

[data-theme="bloom"] .group-select-label,
[data-theme="bloom"] .notes-select-label {
  color: rgba(255, 174, 0, 0.9);
}

[data-theme="bloom"] .group-select-label i,
[data-theme="bloom"] .notes-select-label i {
  color: #ffae00;
}

/* Responsive: full width on mobile */
@media (max-width: 768px) {
  .generator-prompt-bar {
    left: 0 !important;
    padding: 1.25rem 1.5rem;
  }
}

.prompt-container {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.5fr 1fr 0.9fr 0.7fr;
  gap: 0.5rem;
  align-items: center; /* centrer verticalement tous les éléments de la barre */
}

/* Wrapper pour groupe et contexte dans la même colonne */
.prompt-group-context-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 180px;
  justify-content: flex-end;
}

.prompt-group-context-wrapper .prompt-group-selector,
.prompt-group-context-wrapper .prompt-notes-selector {
  width: 100%;
  min-width: 0;
}

.prompt-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: flex-end;
}

.prompt-group-selector {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.group-select-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-on-surface);
  white-space: nowrap;
}

.group-select-label i {
  color: var(--color-button);
  font-size: 0.85rem;
}

.group-select {
  padding: 0.5rem 0.7rem;
  padding-right: 2rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text-on-surface);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 10px;
  min-height: 36px;
}

.group-select:hover {
  border-color: var(--color-button);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.group-select:focus {
  outline: none;
  border-color: var(--color-button);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* ===================================
   MODEL SELECTOR
   =================================== */

.prompt-model-selector {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  justify-content: flex-end;
}

.prompt-model-selector .model-select {
  margin-bottom: 0;
  min-width: 160px;
}

.model-select-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-on-surface);
  white-space: nowrap;
}

.model-select-label i {
  color: var(--color-button);
  font-size: 0.85rem;
}

.model-select {
  padding: 0.5rem 0.7rem;
  padding-right: 2rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text-on-surface);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 10px;
  min-height: 36px;
}

.model-select:hover {
  border-color: var(--color-button);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.model-select:focus {
  outline: none;
  border-color: var(--color-button);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* ===================================
   NOTES SELECTOR
   =================================== */

.prompt-notes-selector {
  position: relative;
  min-width: 0;
}

.notes-select-btn {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text-on-surface);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  position: relative;
  min-height: 36px;
}

.notes-select-btn:hover {
  border-color: var(--color-button);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.notes-select-btn:focus {
  outline: none;
  border-color: var(--color-button);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
}

.notes-select-btn.active {
  background: var(--color-button);
  color: var(--color-button-text);
  border-color: var(--color-button);
}

.notes-count-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  background: var(--color-button);
  color: var(--color-button-text);
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
}

/* ===================================
   NOTES SELECTOR SIDEBAR
   =================================== */

.notes-selector-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: var(--color-surface);
  border-left: 2px solid var(--color-border);
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  transition: right 0.3s ease;
  overflow-y: auto;
  backdrop-filter: blur(20px);
}

.notes-selector-sidebar.active {
  right: 0;
}

.notes-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.notes-sidebar-header h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-on-surface);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notes-sidebar-header h3 i {
  color: var(--color-button);
  font-size: 0.9rem;
}

.notes-sidebar-close {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.notes-sidebar-close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text-on-surface);
}

.notes-sidebar-content {
  padding: 0.75rem;
}

.notes-sidebar-loading {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.notes-explorer-folder {
  padding: 0.35rem;
  transition: background 0.2s ease;
  border-radius: 4px;
}

.notes-explorer-folder-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: default;
}

.notes-explorer-folder:has(.notes-explorer-folder-toggle) .notes-explorer-folder-header {
  cursor: pointer;
}

.notes-explorer-folder:has(.notes-explorer-folder-toggle):hover {
  background: var(--color-surface-alt);
}

.notes-explorer-folder-toggle {
  width: 14px;
  text-align: center;
  transition: transform 0.2s ease;
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.notes-explorer-folder.expanded .notes-explorer-folder-toggle {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

/* Les dossiers sans toggle (avec spacer) ne sont pas cliquables */
.notes-explorer-folder:has(.notes-explorer-folder-spacer) .notes-explorer-folder-header {
  cursor: default;
}

.notes-explorer-folder-spacer {
  width: 14px;
  display: inline-block;
}

.notes-explorer-folder-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 0; /* Permet au texte de se rétrécir */
}

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

.notes-explorer-folder-name i {
  font-size: 0.75rem;
}

.notes-explorer-folder-name input[type="checkbox"] {
  width: 0.9rem;
  height: 0.9rem;
  cursor: pointer;
  accent-color: var(--primary-color);
}

.notes-explorer-folder-count {
  font-size: 0.7rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
}

.notes-explorer-folder-children {
  margin-left: 1.25rem;
  margin-top: 0.2rem;
  display: none;
}

.notes-explorer-folder.expanded .notes-explorer-folder-children {
  display: block;
}

.notes-explorer-file {
  padding: 0.35rem 0.4rem;
  padding-left: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 4px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-primary);
}

.notes-explorer-file i {
  font-size: 0.7rem;
}

.notes-explorer-file:hover {
  background: var(--bg-secondary);
}

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

.notes-explorer-file input[type="checkbox"] {
  width: 0.9rem;
  height: 0.9rem;
  cursor: pointer;
  accent-color: var(--primary-color);
  margin-right: 0.5rem;
}

.notes-sidebar-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}

.notes-sidebar-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.notes-sidebar-empty h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .notes-selector-sidebar {
    width: 100%;
    right: -100%;
  }
}

.prompt-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.prompt-label i {
  color: var(--primary-color);
  font-size: 0.9rem;
}

#generator-prompt-input {
  width: 100%;
  min-height: 45px;
  max-height: 120px;
  padding: 0.65rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  transition: all 0.3s ease;
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#generator-prompt-input:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#generator-prompt-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

#generator-prompt-input::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

.prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex-shrink: 1;
  align-items: flex-end;
  justify-content: center; /* centrer verticalement le bouton dans sa colonne */
  max-width: 180px;
}

.prompt-actions #generator-generate-btn {
  flex: 0 0 auto;
  align-self: flex-end;
  height: auto;
}

/* ===================================
   GENERATE BUTTON - Advanced 3D Style
   =================================== */

#generator-generate-btn {
  --ease: cubic-bezier(0.5, 0, 0.3, 1);
  --ease-elastic: cubic-bezier(0.5, 2, 0.3, 0.8);
  --radius: 26px;
  --primary: #45f8f8;
  
  outline: none;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius);
  position: relative;
  width: 100%;
  min-width: 120px;
  min-height: 60px;
  padding: 0.55rem 0.65rem;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition:
    background-color 2s linear,
    box-shadow 0.5s ease,
    transform 0.6s ease;
  transform: rotateX(4deg);
  background: var(--primary);
  box-shadow:
    inset 0 0 20px rgba(34, 124, 136, 0.6),
    0 5px 10px -2px rgba(0, 10, 20, 0.4),
    0 30px 25px -15px rgba(10, 20, 30, 0.25),
    inset 0 -2px 0 -1px #484e60,
    inset 0 0 2px 4px #888ea3;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #3c5d7d;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  overflow: visible;
  white-space: nowrap;
}

#generator-generate-btn::before,
#generator-generate-btn::after {
  content: "";
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: white;
  position: absolute;
  display: block;
  filter: blur(25px);
  mix-blend-mode: plus-lighter;
  margin: auto;
  inset: 0;
  top: 10px;
  transition: all 1s ease;
  pointer-events: none;
  opacity: 0.4;
}

#generator-generate-btn::after {
  transform: scale(0);
  animation: pulse-out 3s var(--ease-elastic) infinite;
}

@keyframes pulse-out {
  40% {
    transform: scale(1);
  }
}

#generator-generate-btn::before {
  opacity: 0.4;
}

#generator-generate-btn i {
  font-size: 1.1rem;
  position: relative;
  z-index: 2;
}

/* Effet de reflet lumineux */
#generator-generate-btn .btn-reflex {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

#generator-generate-btn .btn-reflex::before {
  content: "";
  position: absolute;
  width: 300px;
  background: linear-gradient(
    to right,
    rgba(221, 249, 255, 0.05) 10%,
    rgba(221, 245, 255, 0.15) 60%,
    rgba(221, 246, 255, 0.1) 60%,
    rgba(221, 255, 254, 0.05) 90%
  );
  top: -40%;
  bottom: -40%;
  left: -132%;
  transform: translateX(0) skew(-30deg);
  transition: all 0.7s var(--ease);
}

#generator-generate-btn:hover:not(:disabled) .btn-reflex::before {
  transform: translate(192%, 0) skew(-30deg);
}

#generator-generate-btn:hover:not(:disabled) {
  transition:
    all 0.6s var(--ease-elastic),
    background 1s ease;
  transform: rotateX(0deg) translateY(5px);
  box-shadow:
    inset 0 0 25px rgba(34, 124, 136, 0.7),
    0 8px 20px rgba(0, 10, 20, 0.35),
    0 35px 28px -15px rgba(10, 20, 30, 0.35),
    inset 0 -2px 0 -1px #484e60,
    inset 0 0 2px 4px #888ea3;
}

#generator-generate-btn:active:not(:disabled) {
  transform: rotateX(0deg) translateY(8px);
  box-shadow:
    inset 0 0 15px rgba(34, 124, 136, 0.5),
    0 2px 8px rgba(0, 10, 20, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(136, 142, 163, 0.8);
}

#generator-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: rotateX(4deg);
  pointer-events: none;
}

/* Animation de génération */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 20px rgba(34, 124, 136, 0.6),
      0 5px 10px -2px rgba(0, 10, 20, 0.4),
      0 30px 25px -15px rgba(10, 20, 30, 0.25),
      inset 0 -2px 0 -1px #484e60,
      inset 0 0 2px 4px #888ea3;
  }
  50% {
    box-shadow:
      inset 0 0 28px rgba(34, 174, 186, 0.7),
      0 5px 12px -2px rgba(0, 10, 20, 0.5),
      0 32px 32px -15px rgba(10, 20, 30, 0.35),
      inset 0 -2px 0 -1px #484e60,
      inset 0 0 2px 4px #aabec3;
  }
}

#generator-generate-btn.generating {
  animation: pulse-glow 1.5s ease-in-out infinite;
  pointer-events: none;
}

#generator-generate-btn.generating::after {
  opacity: 1;
  animation: pulse-out 1s var(--ease-elastic) infinite, spin 0.8s linear infinite;
}

#generator-generate-btn.generating i {
  animation: spin 1s linear infinite;
}

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

#generator-clear-btn-bottom {
  padding: 0.45rem 0.75rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 32px;
}

.clear-btn-inline {
  width: 100%;
}

#generator-clear-btn-bottom i {
  font-size: 1rem;
}

#generator-clear-btn-bottom:hover {
  background: var(--bg-primary);
  border-color: var(--text-secondary);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#generator-clear-btn-bottom:active {
  transform: translateY(0);
}

/* ===================================
   LOADING STATE
   =================================== */

#generator-generate-btn.generating {
  position: relative;
  pointer-events: none;
}

#generator-generate-btn.generating::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.6s linear infinite;
}

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

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 1200px) {
  .code-generator-content {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  
  .generator-prompt-bar {
    left: 0;
    padding: 1.25rem 1.5rem;
  }
  
  .prompt-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .prompt-group-context-wrapper,
  .prompt-group-selector,
  .prompt-model-selector,
  .prompt-notes-selector {
    min-width: 100%;
  }
  
  .prompt-actions {
    width: 100%;
    flex-direction: row;
  }
  
  #generator-generate-btn {
    flex: 2;
  }
  
  #generator-clear-btn-bottom {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .code-generator-section {
    padding: 1rem;
  }
  
  .code-generator-title {
    font-size: 1.8rem;
  }
  
  .code-generator-subtitle {
    font-size: 0.95rem;
  }
  
  .code-generator-content {
    gap: 1rem;
  }
  
  .panel-header {
    padding: 0.75rem 1rem;
  }
  
  .panel-title {
    font-size: 0.9rem;
  }
  
  .btn-panel {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
}

/* ===================================
   DARK MODE SUPPORT
   =================================== */

[data-theme="dark"] .code-generator-section {
  color: var(--text-primary);
}

[data-theme="dark"] .preview-container {
  background: #1a1a1a;
}

[data-theme="dark"] #generator-prompt-input {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Thème Métal - Barre de prompt sombre avec accent discret */
[data-theme="metal"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(28, 28, 28, 0.98), rgba(22, 22, 22, 0.99));
  border-top: 1px solid #3d3d3d;
  color: #e53935;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

/* Input dans le thème Métal */
[data-theme="metal"] #generator-prompt-input {
  background: #1c1c1c;
  border: 2px solid #3d3d3d;
  color: #e53935;
}

[data-theme="metal"] #generator-prompt-input:hover {
  border-color: #4d4d4d;
}

[data-theme="metal"] #generator-prompt-input:focus {
  border-color: #4d4d4d;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
}

[data-theme="metal"] #generator-prompt-input::placeholder {
  color: rgba(211, 47, 47, 0.4);
}

/* Thème Flashy - Barre de prompt violette sombre avec accent néon */
[data-theme="flashy"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 0, 51, 0.98), rgba(13, 0, 26, 0.99));
  border-top: 2px solid #00ffff;
  color: #00ffff;
  box-shadow: 0 -4px 20px rgba(0, 255, 255, 0.15);
}

/* Input dans le thème Flashy */
[data-theme="flashy"] #generator-prompt-input {
  background: #1a0033;
  border: 2px solid #ff00ff;
  color: #00ffff;
}

[data-theme="flashy"] #generator-prompt-input:hover {
  border-color: #ff66ff;
}

[data-theme="flashy"] #generator-prompt-input:focus {
  border-color: #00ffff;
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.2), 0 0 10px rgba(0, 255, 255, 0.3);
}

[data-theme="flashy"] #generator-prompt-input::placeholder {
  color: rgba(0, 255, 255, 0.4);
}

/* Thème Bois - Barre de prompt brune */
[data-theme="wood"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(93, 64, 55, 0.97), rgba(78, 52, 46, 0.99));
  border-top: 2px solid #d7a86e;
  color: #ffe0b2;
  box-shadow: 0 -4px 20px rgba(215, 168, 110, 0.15);
}

/* Input dans le thème Bois */
[data-theme="wood"] #generator-prompt-input {
  background: #6d4c41;
  border: 2px solid #8d6e63;
  color: #ffe0b2;
}

[data-theme="wood"] #generator-prompt-input:hover {
  border-color: #a1887f;
}

[data-theme="wood"] #generator-prompt-input:focus {
  border-color: #d7a86e;
  box-shadow: 0 0 0 3px rgba(215, 168, 110, 0.2), 0 0 10px rgba(215, 168, 110, 0.3);
}

[data-theme="wood"] #generator-prompt-input::placeholder {
  color: rgba(255, 224, 178, 0.4);
}

/* Boutons et éléments pour les nouveaux thèmes */

/* Thème Métal - Boutons et sélecteurs */
[data-theme="metal"] #generator-generate-btn {
  --primary: #e53935;
  background: #6d1414;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(109, 20, 20, 0.6),
    0 5px 10px -2px rgba(109, 20, 20, 0.4),
    0 30px 25px -15px rgba(109, 20, 20, 0.25),
    inset 0 -2px 0 -1px rgba(45, 45, 45, 0.8),
    inset 0 0 2px 4px rgba(139, 28, 28, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

[data-theme="metal"] #generator-generate-btn:hover:not(:disabled) {
  background: #8b0000;
  box-shadow:
    inset 0 0 25px rgba(139, 0, 0, 0.7),
    0 8px 20px rgba(139, 0, 0, 0.35),
    0 35px 28px -15px rgba(139, 0, 0, 0.35),
    inset 0 -2px 0 -1px rgba(45, 45, 45, 0.8),
    inset 0 0 2px 4px rgba(165, 26, 26, 0.8);
}

[data-theme="metal"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(109, 20, 20, 0.5),
    0 2px 8px rgba(109, 20, 20, 0.25),
    inset 0 -2px 0 -1px rgba(45, 45, 45, 0.8),
    inset 0 0 2px 4px rgba(139, 28, 28, 0.8);
}

[data-theme="metal"] #generator-clear-btn-bottom {
  background: #2d2d2d;
  color: rgba(211, 47, 47, 0.85);
  border: 2px solid #3d3d3d;
}

[data-theme="metal"] #generator-clear-btn-bottom:hover {
  background: #1c1c1c;
  border-color: #4d4d4d;
  color: #e53935;
}

[data-theme="metal"] .group-select,
[data-theme="metal"] .notes-select-btn {
  background: #1c1c1c;
  border: 2px solid #3d3d3d;
  color: #e53935;
}

[data-theme="metal"] .group-select:hover,
[data-theme="metal"] .notes-select-btn:hover {
  border-color: #4d4d4d;
}

[data-theme="metal"] .group-select:focus,
[data-theme="metal"] .notes-select-btn:focus {
  border-color: #4d4d4d;
}

/* Thème Flashy - Boutons et sélecteurs */
[data-theme="flashy"] #generator-generate-btn {
  --primary: #ff00ff;
  background: #ff00ff;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(204, 0, 204, 0.6),
    0 5px 10px -2px rgba(255, 0, 255, 0.4),
    0 30px 25px -15px rgba(255, 0, 255, 0.25),
    inset 0 -2px 0 -1px rgba(51, 0, 102, 0.8),
    inset 0 0 2px 4px rgba(255, 102, 255, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="flashy"] #generator-generate-btn:hover:not(:disabled) {
  background: #ff66ff;
  box-shadow:
    inset 0 0 25px rgba(255, 51, 255, 0.7),
    0 8px 20px rgba(255, 102, 255, 0.35),
    0 35px 28px -15px rgba(255, 102, 255, 0.35),
    inset 0 -2px 0 -1px rgba(51, 0, 102, 0.8),
    inset 0 0 2px 4px rgba(255, 153, 255, 0.8);
}

[data-theme="flashy"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(204, 0, 204, 0.5),
    0 2px 8px rgba(255, 0, 255, 0.25),
    inset 0 -2px 0 -1px rgba(51, 0, 102, 0.8),
    inset 0 0 2px 4px rgba(255, 102, 255, 0.8);
}

[data-theme="flashy"] #generator-clear-btn-bottom {
  background: #330066;
  color: rgba(0, 255, 255, 0.85);
  border: 2px solid #ff00ff;
}

[data-theme="flashy"] #generator-clear-btn-bottom:hover {
  background: #1a0033;
  border-color: #ff66ff;
  color: #00ffff;
}

[data-theme="flashy"] .group-select,
[data-theme="flashy"] .notes-select-btn {
  background: #1a0033;
  border: 2px solid #ff00ff;
  color: #00ffff;
}

[data-theme="flashy"] .group-select:hover,
[data-theme="flashy"] .notes-select-btn:hover {
  border-color: #ff66ff;
}

[data-theme="flashy"] .group-select:focus,
[data-theme="flashy"] .notes-select-btn:focus {
  border-color: #00ffff;
}

/* Thème Bois - Boutons et sélecteurs */
[data-theme="wood"] #generator-generate-btn {
  --primary: #d7a86e;
  background: #8d6e63;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(109, 84, 76, 0.6),
    0 5px 10px -2px rgba(141, 110, 99, 0.4),
    0 30px 25px -15px rgba(141, 110, 99, 0.25),
    inset 0 -2px 0 -1px rgba(93, 64, 55, 0.8),
    inset 0 0 2px 4px rgba(161, 136, 127, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="wood"] #generator-generate-btn:hover:not(:disabled) {
  background: #a1887f;
  box-shadow:
    inset 0 0 25px rgba(141, 110, 99, 0.7),
    0 8px 20px rgba(161, 136, 127, 0.35),
    0 35px 28px -15px rgba(161, 136, 127, 0.35),
    inset 0 -2px 0 -1px rgba(93, 64, 55, 0.8),
    inset 0 0 2px 4px rgba(188, 170, 164, 0.8);
}

[data-theme="wood"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(109, 84, 76, 0.5),
    0 2px 8px rgba(141, 110, 99, 0.25),
    inset 0 -2px 0 -1px rgba(93, 64, 55, 0.8),
    inset 0 0 2px 4px rgba(161, 136, 127, 0.8);
}

[data-theme="wood"] #generator-clear-btn-bottom {
  background: #6d4c41;
  color: rgba(255, 224, 178, 0.85);
  border: 2px solid #8d6e63;
}

[data-theme="wood"] #generator-clear-btn-bottom:hover {
  background: #5d4037;
  border-color: #a1887f;
  color: #ffe0b2;
}

[data-theme="wood"] .group-select,
[data-theme="wood"] .notes-select-btn {
  background: #6d4c41;
  border: 2px solid #8d6e63;
  color: #ffe0b2;
}

[data-theme="wood"] .group-select:hover,
[data-theme="wood"] .notes-select-btn:hover {
  border-color: #a1887f;
}

[data-theme="wood"] .group-select:focus,
[data-theme="wood"] .notes-select-btn:focus {
  border-color: #d7a86e;
}

/* Thème Océan - Barre de prompt bleue foncée */
[data-theme="ocean"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(2, 119, 189, 0.98), rgba(1, 87, 155, 0.99));
  border-top: 1px solid #0288d1;
  color: #e3f2fd;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

/* Input dans le thème Océan */
[data-theme="ocean"] #generator-prompt-input {
  background: #1565c0;
  border: 2px solid #0288d1;
  color: #e3f2fd;
}

[data-theme="ocean"] #generator-prompt-input:hover {
  border-color: #039be5;
}

[data-theme="ocean"] #generator-prompt-input:focus {
  border-color: #039be5;
  box-shadow: 0 0 0 3px rgba(227, 242, 253, 0.2);
}

[data-theme="ocean"] #generator-prompt-input::placeholder {
  color: rgba(227, 242, 253, 0.5);
}

/* Thème Océan - Boutons et sélecteurs */
[data-theme="ocean"] #generator-generate-btn {
  --primary: #0288d1;
  background: #0288d1;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(1, 87, 155, 0.6),
    0 5px 10px -2px rgba(2, 136, 209, 0.4),
    0 30px 25px -15px rgba(2, 136, 209, 0.25),
    inset 0 -2px 0 -1px rgba(1, 87, 155, 0.8),
    inset 0 0 2px 4px rgba(3, 169, 244, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="ocean"] #generator-generate-btn:hover:not(:disabled) {
  background: #039be5;
  box-shadow:
    inset 0 0 25px rgba(2, 136, 209, 0.7),
    0 8px 20px rgba(3, 155, 229, 0.35),
    0 35px 28px -15px rgba(3, 155, 229, 0.35),
    inset 0 -2px 0 -1px rgba(1, 87, 155, 0.8),
    inset 0 0 2px 4px rgba(41, 182, 246, 0.8);
}

[data-theme="ocean"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(1, 87, 155, 0.5),
    0 2px 8px rgba(2, 136, 209, 0.25),
    inset 0 -2px 0 -1px rgba(1, 87, 155, 0.8),
    inset 0 0 2px 4px rgba(3, 169, 244, 0.8);
}

[data-theme="ocean"] #generator-clear-btn-bottom {
  background: #1565c0;
  color: rgba(227, 242, 253, 0.85);
  border: 2px solid #0288d1;
}

[data-theme="ocean"] #generator-clear-btn-bottom:hover {
  background: #0277bd;
  border-color: #039be5;
  color: #e3f2fd;
}

[data-theme="ocean"] .group-select,
[data-theme="ocean"] .notes-select-btn {
  background: #1565c0;
  border: 2px solid #0288d1;
  color: #e3f2fd;
}

[data-theme="ocean"] .group-select:hover,
[data-theme="ocean"] .notes-select-btn:hover {
  border-color: #039be5;
}

[data-theme="ocean"] .group-select:focus,
[data-theme="ocean"] .notes-select-btn:focus {
  border-color: #039be5;
}

/* Thèmes manquants - Barre de prompt et inputs */

/* Thème Default - Boutons */
[data-theme="default"] #generator-generate-btn {
  --primary: #06A86B;
  background: #06A86B;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(4, 150, 95, 0.6),
    0 5px 10px -2px rgba(6, 168, 107, 0.4),
    0 30px 25px -15px rgba(6, 168, 107, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(136, 142, 163, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="default"] #generator-generate-btn:hover:not(:disabled) {
  background: #04965F;
  box-shadow:
    inset 0 0 25px rgba(4, 150, 95, 0.7),
    0 8px 20px rgba(4, 150, 95, 0.35),
    0 35px 28px -15px rgba(4, 150, 95, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(136, 142, 163, 0.8);
}

[data-theme="default"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(4, 150, 95, 0.5),
    0 2px 8px rgba(6, 168, 107, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(136, 142, 163, 0.8);
}

/* Thème Dark - Boutons */
[data-theme="dark"] #generator-generate-btn {
  --primary: #3636c4;
  background: #3636c4;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(54, 54, 196, 0.6),
    0 5px 10px -2px rgba(54, 54, 196, 0.4),
    0 30px 25px -15px rgba(54, 54, 196, 0.25),
    inset 0 -2px 0 -1px rgba(45, 45, 45, 0.8),
    inset 0 0 2px 4px rgba(74, 74, 232, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #generator-generate-btn:hover:not(:disabled) {
  background: #4a4ae8;
  box-shadow:
    inset 0 0 25px rgba(74, 74, 232, 0.7),
    0 8px 20px rgba(74, 74, 232, 0.35),
    0 35px 28px -15px rgba(74, 74, 232, 0.35),
    inset 0 -2px 0 -1px rgba(45, 45, 45, 0.8),
    inset 0 0 2px 4px rgba(100, 100, 255, 0.8);
}

[data-theme="dark"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(54, 54, 196, 0.5),
    0 2px 8px rgba(54, 54, 196, 0.25),
    inset 0 -2px 0 -1px rgba(45, 45, 45, 0.8),
    inset 0 0 2px 4px rgba(74, 74, 232, 0.8);
}

/* Thème Light - Boutons */
[data-theme="light"] #generator-generate-btn {
  --primary: #6200EE;
  background: #6200EE;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(80, 0, 216, 0.6),
    0 5px 10px -2px rgba(98, 0, 238, 0.4),
    0 30px 25px -15px rgba(98, 0, 238, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(136, 142, 163, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] #generator-generate-btn:hover:not(:disabled) {
  background: #5000d8;
  box-shadow:
    inset 0 0 25px rgba(80, 0, 216, 0.7),
    0 8px 20px rgba(80, 0, 216, 0.35),
    0 35px 28px -15px rgba(80, 0, 216, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(136, 142, 163, 0.8);
}

[data-theme="light"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(80, 0, 216, 0.5),
    0 2px 8px rgba(98, 0, 238, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(136, 142, 163, 0.8);
}

/* Thème Bleu */
[data-theme="blue"] #generator-generate-btn {
  --primary: #1976D2;
  background: #1976D2;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(21, 101, 192, 0.6),
    0 5px 10px -2px rgba(25, 118, 210, 0.4),
    0 30px 25px -15px rgba(25, 118, 210, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(144, 202, 249, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="blue"] #generator-generate-btn:hover:not(:disabled) {
  background: #1565C0;
  box-shadow:
    inset 0 0 25px rgba(21, 101, 192, 0.7),
    0 8px 20px rgba(21, 101, 192, 0.35),
    0 35px 28px -15px rgba(21, 101, 192, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(144, 202, 249, 0.8);
}

[data-theme="blue"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(21, 101, 192, 0.5),
    0 2px 8px rgba(25, 118, 210, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(144, 202, 249, 0.8);
}

[data-theme="blue"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.99));
  border-top-color: var(--color-border);
  color: var(--color-text-on-surface);
}

[data-theme="blue"] #generator-prompt-input {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="blue"] #generator-prompt-input::placeholder {
  color: var(--text-tertiary);
}

/* Thème Vert */
[data-theme="green"] #generator-generate-btn {
  --primary: #2E7D32;
  background: #2E7D32;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(27, 94, 32, 0.6),
    0 5px 10px -2px rgba(46, 125, 50, 0.4),
    0 30px 25px -15px rgba(46, 125, 50, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(165, 214, 167, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="green"] #generator-generate-btn:hover:not(:disabled) {
  background: #388E3C;
  box-shadow:
    inset 0 0 25px rgba(46, 125, 50, 0.7),
    0 8px 20px rgba(56, 142, 60, 0.35),
    0 35px 28px -15px rgba(56, 142, 60, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(165, 214, 167, 0.8);
}

[data-theme="green"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(27, 94, 32, 0.5),
    0 2px 8px rgba(46, 125, 50, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(165, 214, 167, 0.8);
}

[data-theme="green"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.99));
  border-top-color: var(--color-border);
  color: var(--color-text-on-surface);
}

[data-theme="green"] #generator-prompt-input {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="green"] #generator-prompt-input::placeholder {
  color: var(--text-tertiary);
}

/* Thème Rouge */
[data-theme="red"] #generator-generate-btn {
  --primary: #C62828;
  background: #C62828;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(183, 28, 28, 0.6),
    0 5px 10px -2px rgba(198, 40, 40, 0.4),
    0 30px 25px -15px rgba(198, 40, 40, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 138, 128, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="red"] #generator-generate-btn:hover:not(:disabled) {
  background: #D32F2F;
  box-shadow:
    inset 0 0 25px rgba(198, 40, 40, 0.7),
    0 8px 20px rgba(211, 47, 47, 0.35),
    0 35px 28px -15px rgba(211, 47, 47, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 138, 128, 0.8);
}

[data-theme="red"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(183, 28, 28, 0.5),
    0 2px 8px rgba(198, 40, 40, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 138, 128, 0.8);
}

[data-theme="red"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.99));
  border-top-color: var(--color-border);
  color: var(--color-text-on-surface);
}

[data-theme="red"] #generator-prompt-input {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="red"] #generator-prompt-input::placeholder {
  color: var(--text-tertiary);
}

/* Thème Pastel */
[data-theme="pastel"] #generator-generate-btn {
  --primary: #FFB6C1;
  background: #FFB6C1;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(255, 182, 193, 0.6),
    0 5px 10px -2px rgba(255, 182, 193, 0.4),
    0 30px 25px -15px rgba(255, 182, 193, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 192, 203, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

[data-theme="pastel"] #generator-generate-btn:hover:not(:disabled) {
  background: #FFC0CB;
  box-shadow:
    inset 0 0 25px rgba(255, 192, 203, 0.7),
    0 8px 20px rgba(255, 192, 203, 0.35),
    0 35px 28px -15px rgba(255, 192, 203, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 215, 223, 0.8);
}

[data-theme="pastel"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(255, 182, 193, 0.5),
    0 2px 8px rgba(255, 182, 193, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 192, 203, 0.8);
}

[data-theme="pastel"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 244, 230, 0.97), rgba(255, 244, 230, 0.99));
  border-top-color: #FFE4E1;
  color: #FF69B4;
}

[data-theme="pastel"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #FFE4E1;
  color: #FF69B4;
}

[data-theme="pastel"] #generator-prompt-input::placeholder {
  color: rgba(255, 105, 180, 0.4);
}

/* Thème Forêt */
[data-theme="forest"] #generator-generate-btn {
  --primary: #52B788;
  background: #52B788;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(27, 67, 50, 0.6),
    0 5px 10px -2px rgba(82, 183, 136, 0.4),
    0 30px 25px -15px rgba(82, 183, 136, 0.25),
    inset 0 -2px 0 -1px rgba(29, 63, 42, 0.8),
    inset 0 0 2px 4px rgba(107, 192, 139, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="forest"] #generator-generate-btn:hover:not(:disabled) {
  background: #6BC08B;
  box-shadow:
    inset 0 0 25px rgba(45, 95, 74, 0.7),
    0 8px 20px rgba(107, 192, 139, 0.35),
    0 35px 28px -15px rgba(107, 192, 139, 0.35),
    inset 0 -2px 0 -1px rgba(29, 63, 42, 0.8),
    inset 0 0 2px 4px rgba(149, 213, 178, 0.8);
}

[data-theme="forest"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(27, 67, 50, 0.5),
    0 2px 8px rgba(82, 183, 136, 0.25),
    inset 0 -2px 0 -1px rgba(29, 63, 42, 0.8),
    inset 0 0 2px 4px rgba(107, 192, 139, 0.8);
}

[data-theme="forest"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(45, 95, 74, 0.98), rgba(27, 67, 50, 0.99));
  border-top: 2px solid #52B788;
  color: #B5E48C;
}

[data-theme="forest"] #generator-prompt-input {
  background: #2D5F4A;
  border: 2px solid #40916C;
  color: #B5E48C;
}

[data-theme="forest"] #generator-prompt-input::placeholder {
  color: rgba(181, 228, 140, 0.4);
}

/* Thème Sunset */
[data-theme="sunset"] #generator-generate-btn {
  --primary: #FF8C42;
  background: #FF8C42;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(255, 107, 53, 0.6),
    0 5px 10px -2px rgba(255, 140, 66, 0.4),
    0 30px 25px -15px rgba(255, 140, 66, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 160, 122, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="sunset"] #generator-generate-btn:hover:not(:disabled) {
  background: #FF6B35;
  box-shadow:
    inset 0 0 25px rgba(255, 107, 53, 0.7),
    0 8px 20px rgba(255, 107, 53, 0.35),
    0 35px 28px -15px rgba(255, 107, 53, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 160, 122, 0.8);
}

[data-theme="sunset"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(255, 107, 53, 0.5),
    0 2px 8px rgba(255, 140, 66, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 160, 122, 0.8);
}

[data-theme="sunset"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 107, 53, 0.97), rgba(255, 107, 53, 0.99));
  border-top: 2px solid #FF8C42;
  color: #ffffff;
}

[data-theme="sunset"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #FFD4C4;
  color: #1A1A1A;
}

[data-theme="sunset"] #generator-prompt-input::placeholder {
  color: rgba(26, 26, 26, 0.4);
}

/* Thème Cyberpunk */
[data-theme="cyberpunk"] #generator-generate-btn {
  --primary: #FF00FF;
  background: #FF00FF;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(204, 0, 204, 0.6),
    0 5px 10px -2px rgba(255, 0, 255, 0.4),
    0 30px 25px -15px rgba(255, 0, 255, 0.25),
    inset 0 -2px 0 -1px rgba(51, 0, 102, 0.8),
    inset 0 0 2px 4px rgba(255, 51, 255, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="cyberpunk"] #generator-generate-btn:hover:not(:disabled) {
  background: #FF33FF;
  box-shadow:
    inset 0 0 25px rgba(255, 51, 255, 0.7),
    0 8px 20px rgba(255, 51, 255, 0.35),
    0 35px 28px -15px rgba(255, 51, 255, 0.35),
    inset 0 -2px 0 -1px rgba(51, 0, 102, 0.8),
    inset 0 0 2px 4px rgba(255, 102, 255, 0.8);
}

[data-theme="cyberpunk"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(204, 0, 204, 0.5),
    0 2px 8px rgba(255, 0, 255, 0.25),
    inset 0 -2px 0 -1px rgba(51, 0, 102, 0.8),
    inset 0 0 2px 4px rgba(255, 51, 255, 0.8);
}

[data-theme="cyberpunk"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 46, 0.98), rgba(22, 33, 62, 0.99));
  border-top: 2px solid #FF00FF;
  color: #00FF00;
}

[data-theme="cyberpunk"] #generator-prompt-input {
  background: #1A1A2E;
  border: 2px solid #FF00FF;
  color: #00FF00;
}

[data-theme="cyberpunk"] #generator-prompt-input::placeholder {
  color: rgba(0, 255, 0, 0.4);
}

/* Thème Grayscale */
[data-theme="grayscale"] #generator-generate-btn {
  --primary: #333333;
  background: #333333;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    0 5px 10px -2px rgba(51, 51, 51, 0.4),
    0 30px 25px -15px rgba(51, 51, 51, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(102, 102, 102, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="grayscale"] #generator-generate-btn:hover:not(:disabled) {
  background: #555555;
  box-shadow:
    inset 0 0 25px rgba(51, 51, 51, 0.7),
    0 8px 20px rgba(85, 85, 85, 0.35),
    0 35px 28px -15px rgba(85, 85, 85, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(136, 136, 136, 0.8);
}

[data-theme="grayscale"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(51, 51, 51, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(102, 102, 102, 0.8);
}

[data-theme="grayscale"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(245, 245, 245, 0.99));
  border-top: 1px solid #CCCCCC;
  color: #000000;
}

[data-theme="grayscale"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #CCCCCC;
  color: #000000;
}

[data-theme="grayscale"] #generator-prompt-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Thème Purple */
[data-theme="purple"] #generator-generate-btn {
  --primary: #6A1B9A;
  background: #6A1B9A;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(74, 20, 140, 0.6),
    0 5px 10px -2px rgba(106, 27, 154, 0.4),
    0 30px 25px -15px rgba(106, 27, 154, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(186, 104, 200, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="purple"] #generator-generate-btn:hover:not(:disabled) {
  background: #7B1FA2;
  box-shadow:
    inset 0 0 25px rgba(106, 27, 154, 0.7),
    0 8px 20px rgba(123, 31, 162, 0.35),
    0 35px 28px -15px rgba(123, 31, 162, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(186, 104, 200, 0.8);
}

[data-theme="purple"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(74, 20, 140, 0.5),
    0 2px 8px rgba(106, 27, 154, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(186, 104, 200, 0.8);
}

[data-theme="purple"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.99));
  border-top: 1px solid #CE93D8;
  color: #4A148C;
}

[data-theme="purple"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #CE93D8;
  color: #4A148C;
}

[data-theme="purple"] #generator-prompt-input::placeholder {
  color: rgba(74, 20, 140, 0.4);
}

/* Thème Pink */
[data-theme="pink"] #generator-generate-btn {
  --primary: #E91E63;
  background: #E91E63;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(194, 24, 91, 0.6),
    0 5px 10px -2px rgba(233, 30, 99, 0.4),
    0 30px 25px -15px rgba(233, 30, 99, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(246, 97, 146, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="pink"] #generator-generate-btn:hover:not(:disabled) {
  background: #F50057;
  box-shadow:
    inset 0 0 25px rgba(233, 30, 99, 0.7),
    0 8px 20px rgba(245, 0, 87, 0.35),
    0 35px 28px -15px rgba(245, 0, 87, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(246, 97, 146, 0.8);
}

[data-theme="pink"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(194, 24, 91, 0.5),
    0 2px 8px rgba(233, 30, 99, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(246, 97, 146, 0.8);
}

[data-theme="pink"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 240, 245, 0.97), rgba(255, 240, 245, 0.99));
  border-top: 1px solid #F8BBD0;
  color: #C2185B;
}

[data-theme="pink"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #F8BBD0;
  color: #C2185B;
}

[data-theme="pink"] #generator-prompt-input::placeholder {
  color: rgba(194, 24, 91, 0.4);
}

/* Thème Turquoise */
[data-theme="turquoise"] #generator-generate-btn {
  --primary: #00838F;
  background: #00838F;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(0, 96, 100, 0.6),
    0 5px 10px -2px rgba(0, 131, 143, 0.4),
    0 30px 25px -15px rgba(0, 131, 143, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(77, 208, 225, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="turquoise"] #generator-generate-btn:hover:not(:disabled) {
  background: #0097A7;
  box-shadow:
    inset 0 0 25px rgba(0, 131, 143, 0.7),
    0 8px 20px rgba(0, 151, 167, 0.35),
    0 35px 28px -15px rgba(0, 151, 167, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(77, 208, 225, 0.8);
}

[data-theme="turquoise"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 96, 100, 0.5),
    0 2px 8px rgba(0, 131, 143, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(77, 208, 225, 0.8);
}

[data-theme="turquoise"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.99));
  border-top: 1px solid #B2EBF2;
  color: #006064;
}

[data-theme="turquoise"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #B2EBF2;
  color: #006064;
}

[data-theme="turquoise"] #generator-prompt-input::placeholder {
  color: rgba(0, 96, 100, 0.4);
}

/* Thème Yellow */
[data-theme="yellow"] #generator-generate-btn {
  --primary: #FFEB3B;
  background: #FFEB3B;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(245, 127, 23, 0.6),
    0 5px 10px -2px rgba(255, 235, 59, 0.4),
    0 30px 25px -15px rgba(255, 235, 59, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 213, 79, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

[data-theme="yellow"] #generator-generate-btn:hover:not(:disabled) {
  background: #FFF059;
  box-shadow:
    inset 0 0 25px rgba(255, 235, 59, 0.7),
    0 8px 20px rgba(255, 240, 89, 0.35),
    0 35px 28px -15px rgba(255, 240, 89, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 213, 79, 0.8);
}

[data-theme="yellow"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(245, 127, 23, 0.5),
    0 2px 8px rgba(255, 235, 59, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(255, 213, 79, 0.8);
}

[data-theme="yellow"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 253, 231, 0.97), rgba(255, 253, 231, 0.99));
  border-top: 1px solid #FFEB3B;
  color: #F57F17;
}

[data-theme="yellow"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #FFEB3B;
  color: #F57F17;
}

[data-theme="yellow"] #generator-prompt-input::placeholder {
  color: rgba(245, 127, 23, 0.4);
}

/* Thème Coffee */
[data-theme="coffee"] #generator-generate-btn {
  --primary: #5D4037;
  background: #5D4037;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(78, 52, 46, 0.6),
    0 5px 10px -2px rgba(93, 64, 55, 0.4),
    0 30px 25px -15px rgba(93, 64, 55, 0.25),
    inset 0 -2px 0 -1px rgba(45, 31, 28, 0.8),
    inset 0 0 2px 4px rgba(188, 170, 154, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="coffee"] #generator-generate-btn:hover:not(:disabled) {
  background: #6D4C41;
  box-shadow:
    inset 0 0 25px rgba(93, 64, 55, 0.7),
    0 8px 20px rgba(109, 76, 65, 0.35),
    0 35px 28px -15px rgba(109, 76, 65, 0.35),
    inset 0 -2px 0 -1px rgba(45, 31, 28, 0.8),
    inset 0 0 2px 4px rgba(188, 170, 154, 0.8);
}

[data-theme="coffee"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(78, 52, 46, 0.5),
    0 2px 8px rgba(93, 64, 55, 0.25),
    inset 0 -2px 0 -1px rgba(45, 31, 28, 0.8),
    inset 0 0 2px 4px rgba(188, 170, 154, 0.8);
}

[data-theme="coffee"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(109, 76, 65, 0.98), rgba(93, 64, 55, 0.99));
  border-top: 2px solid #BCAA9A;
  color: #FFF3E0;
}

[data-theme="coffee"] #generator-prompt-input {
  background: #6D4C41;
  border: 2px solid #8D6E63;
  color: #FFF3E0;
}

[data-theme="coffee"] #generator-prompt-input::placeholder {
  color: rgba(255, 243, 224, 0.4);
}

/* Thème Desert */
[data-theme="desert"] #generator-generate-btn {
  --primary: #DEB887;
  background: #DEB887;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(139, 69, 19, 0.6),
    0 5px 10px -2px rgba(222, 184, 135, 0.4),
    0 30px 25px -15px rgba(222, 184, 135, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(244, 164, 96, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="desert"] #generator-generate-btn:hover:not(:disabled) {
  background: #E8C5A0;
  box-shadow:
    inset 0 0 25px rgba(222, 184, 135, 0.7),
    0 8px 20px rgba(232, 197, 160, 0.35),
    0 35px 28px -15px rgba(232, 197, 160, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(244, 164, 96, 0.8);
}

[data-theme="desert"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(139, 69, 19, 0.5),
    0 2px 8px rgba(222, 184, 135, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(244, 164, 96, 0.8);
}

[data-theme="desert"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.99));
  border-top: 1px solid #E6C6A5;
  color: #8B4513;
}

[data-theme="desert"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #E6C6A5;
  color: #8B4513;
}

[data-theme="desert"] #generator-prompt-input::placeholder {
  color: rgba(139, 69, 19, 0.4);
}

/* Thème Aurora */
[data-theme="aurora"] #generator-generate-btn {
  --primary: #26A69A;
  background: #26A69A;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(0, 119, 102, 0.6),
    0 5px 10px -2px rgba(38, 166, 154, 0.4),
    0 30px 25px -15px rgba(38, 166, 154, 0.25),
    inset 0 -2px 0 -1px rgba(0, 17, 34, 0.8),
    inset 0 0 2px 4px rgba(0, 229, 255, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="aurora"] #generator-generate-btn:hover:not(:disabled) {
  background: #2DD4BF;
  box-shadow:
    inset 0 0 25px rgba(38, 166, 154, 0.7),
    0 8px 20px rgba(45, 212, 191, 0.35),
    0 35px 28px -15px rgba(45, 212, 191, 0.35),
    inset 0 -2px 0 -1px rgba(0, 17, 34, 0.8),
    inset 0 0 2px 4px rgba(0, 229, 255, 0.8);
}

[data-theme="aurora"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 119, 102, 0.5),
    0 2px 8px rgba(38, 166, 154, 0.25),
    inset 0 -2px 0 -1px rgba(0, 17, 34, 0.8),
    inset 0 0 2px 4px rgba(0, 229, 255, 0.8);
}

[data-theme="aurora"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(10, 25, 41, 0.98), rgba(0, 17, 34, 0.99));
  border-top: 2px solid #00E5FF;
  color: #4FC3F7;
}

[data-theme="aurora"] #generator-prompt-input {
  background: #0A1929;
  border: 2px solid #64B5F6;
  color: #4FC3F7;
}

[data-theme="aurora"] #generator-prompt-input::placeholder {
  color: rgba(79, 195, 247, 0.4);
}

/* Thème Matrix */
[data-theme="matrix"] #generator-generate-btn {
  --primary: #00FF00;
  background: #003300;
  color: #00FF00;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    0 5px 10px -2px rgba(0, 51, 0, 0.4),
    0 30px 25px -15px rgba(0, 51, 0, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(0, 204, 0, 0.8);
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 1);
}

[data-theme="matrix"] #generator-generate-btn:hover:not(:disabled) {
  background: #004400;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.7),
    0 8px 20px rgba(0, 68, 0, 0.35),
    0 35px 28px -15px rgba(0, 68, 0, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(0, 255, 0, 0.8);
}

[data-theme="matrix"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 51, 0, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(0, 204, 0, 0.8);
}

[data-theme="matrix"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(0, 17, 0, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #00FF00;
  color: #00FF00;
}

[data-theme="matrix"] #generator-prompt-input {
  background: #001100;
  border: 2px solid #00FF00;
  color: #00FF00;
}

[data-theme="matrix"] #generator-prompt-input::placeholder {
  color: rgba(0, 255, 0, 0.4);
}

/* Thème Terminal */
[data-theme="terminal"] #generator-generate-btn {
  --primary: #007ACC;
  background: #007ACC;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(0, 96, 204, 0.6),
    0 5px 10px -2px rgba(0, 122, 204, 0.4),
    0 30px 25px -15px rgba(0, 122, 204, 0.25),
    inset 0 -2px 0 -1px rgba(30, 30, 30, 0.8),
    inset 0 0 2px 4px rgba(78, 201, 176, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="terminal"] #generator-generate-btn:hover:not(:disabled) {
  background: #0098FF;
  box-shadow:
    inset 0 0 25px rgba(0, 122, 204, 0.7),
    0 8px 20px rgba(0, 152, 255, 0.35),
    0 35px 28px -15px rgba(0, 152, 255, 0.35),
    inset 0 -2px 0 -1px rgba(30, 30, 30, 0.8),
    inset 0 0 2px 4px rgba(78, 201, 176, 0.8);
}

[data-theme="terminal"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 96, 204, 0.5),
    0 2px 8px rgba(0, 122, 204, 0.25),
    inset 0 -2px 0 -1px rgba(30, 30, 30, 0.8),
    inset 0 0 2px 4px rgba(78, 201, 176, 0.8);
}

[data-theme="terminal"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(37, 37, 38, 0.98), rgba(30, 30, 30, 0.99));
  border-top: 1px solid #3E3E42;
  color: #D4D4D4;
}

[data-theme="terminal"] #generator-prompt-input {
  background: #252526;
  border: 2px solid #3E3E42;
  color: #D4D4D4;
}

[data-theme="terminal"] #generator-prompt-input::placeholder {
  color: rgba(212, 212, 212, 0.4);
}

/* Thème Monochrome */
[data-theme="monochrome"] #generator-generate-btn {
  --primary: #555555;
  background: #555555;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    0 5px 10px -2px rgba(85, 85, 85, 0.4),
    0 30px 25px -15px rgba(85, 85, 85, 0.25),
    inset 0 -2px 0 -1px rgba(44, 44, 44, 0.8),
    inset 0 0 2px 4px rgba(136, 136, 136, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="monochrome"] #generator-generate-btn:hover:not(:disabled) {
  background: #666666;
  box-shadow:
    inset 0 0 25px rgba(85, 85, 85, 0.7),
    0 8px 20px rgba(102, 102, 102, 0.35),
    0 35px 28px -15px rgba(102, 102, 102, 0.35),
    inset 0 -2px 0 -1px rgba(44, 44, 44, 0.8),
    inset 0 0 2px 4px rgba(136, 136, 136, 0.8);
}

[data-theme="monochrome"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(85, 85, 85, 0.25),
    inset 0 -2px 0 -1px rgba(44, 44, 44, 0.8),
    inset 0 0 2px 4px rgba(136, 136, 136, 0.8);
}

[data-theme="monochrome"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(60, 60, 60, 0.98), rgba(44, 44, 44, 0.99));
  border-top: 1px solid #606060;
  color: #E0E0E0;
}

[data-theme="monochrome"] #generator-prompt-input {
  background: #3C3C3C;
  border: 2px solid #606060;
  color: #E0E0E0;
}

[data-theme="monochrome"] #generator-prompt-input::placeholder {
  color: rgba(224, 224, 224, 0.4);
}

/* Thème Google */
[data-theme="google"] #generator-generate-btn {
  --primary: #4285f4;
  background: #4285f4;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(51, 103, 214, 0.6),
    0 5px 10px -2px rgba(66, 133, 244, 0.4),
    0 30px 25px -15px rgba(66, 133, 244, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(189, 193, 198, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="google"] #generator-generate-btn:hover:not(:disabled) {
  background: #3367d6;
  box-shadow:
    inset 0 0 25px rgba(51, 103, 214, 0.7),
    0 8px 20px rgba(51, 103, 214, 0.35),
    0 35px 28px -15px rgba(51, 103, 214, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(189, 193, 198, 0.8);
}

[data-theme="google"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(51, 103, 214, 0.5),
    0 2px 8px rgba(66, 133, 244, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(189, 193, 198, 0.8);
}

[data-theme="google"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(248, 249, 250, 0.98), rgba(255, 255, 255, 0.99));
  border-top: 2px solid #4285f4;
  color: #202124;
}

[data-theme="google"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #dadce0;
  color: #202124;
}

[data-theme="google"] #generator-prompt-input::placeholder {
  color: rgba(32, 33, 36, 0.4);
}

/* Thème Meta */
[data-theme="meta"] #generator-generate-btn {
  --primary: #1877f2;
  background: #1877f2;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(22, 111, 229, 0.6),
    0 5px 10px -2px rgba(24, 119, 242, 0.4),
    0 30px 25px -15px rgba(24, 119, 242, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(190, 195, 201, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="meta"] #generator-generate-btn:hover:not(:disabled) {
  background: #166fe5;
  box-shadow:
    inset 0 0 25px rgba(22, 111, 229, 0.7),
    0 8px 20px rgba(22, 111, 229, 0.35),
    0 35px 28px -15px rgba(22, 111, 229, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(190, 195, 201, 0.8);
}

[data-theme="meta"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(22, 111, 229, 0.5),
    0 2px 8px rgba(24, 119, 242, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(190, 195, 201, 0.8);
}

[data-theme="meta"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(242, 243, 245, 0.98), rgba(255, 255, 255, 0.99));
  border-top: 2px solid #1877f2;
  color: #050505;
}

[data-theme="meta"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #dadde1;
  color: #050505;
}

[data-theme="meta"] #generator-prompt-input::placeholder {
  color: rgba(5, 5, 5, 0.4);
}

/* Thème NVIDIA */
[data-theme="nvidia"] #generator-generate-btn {
  --primary: #76b900;
  background: #76b900;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    0 5px 10px -2px rgba(118, 185, 0, 0.4),
    0 30px 25px -15px rgba(118, 185, 0, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(133, 201, 26, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="nvidia"] #generator-generate-btn:hover:not(:disabled) {
  background: #85c91a;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.7),
    0 8px 20px rgba(133, 201, 26, 0.35),
    0 35px 28px -15px rgba(133, 201, 26, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(118, 185, 0, 0.8);
}

[data-theme="nvidia"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(118, 185, 0, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(133, 201, 26, 0.8);
}

[data-theme="nvidia"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #76b900;
  color: #76b900;
}

[data-theme="nvidia"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #76b900;
  color: #ffffff;
}

[data-theme="nvidia"] #generator-prompt-input::placeholder {
  color: rgba(118, 185, 0, 0.4);
}

/* Thème BNP Paribas */
[data-theme="bnp-paribas"] #generator-generate-btn {
  --primary: #00a651;
  background: #00a651;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(0, 133, 81, 0.6),
    0 5px 10px -2px rgba(0, 166, 81, 0.4),
    0 30px 25px -15px rgba(0, 166, 81, 0.25),
    inset 0 -2px 0 -1px rgba(0, 61, 43, 0.8),
    inset 0 0 2px 4px rgba(0, 199, 96, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="bnp-paribas"] #generator-generate-btn:hover:not(:disabled) {
  background: #00c760;
  box-shadow:
    inset 0 0 25px rgba(0, 166, 81, 0.7),
    0 8px 20px rgba(0, 199, 96, 0.35),
    0 35px 28px -15px rgba(0, 199, 96, 0.35),
    inset 0 -2px 0 -1px rgba(0, 61, 43, 0.8),
    inset 0 0 2px 4px rgba(0, 166, 81, 0.8);
}

[data-theme="bnp-paribas"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 133, 81, 0.5),
    0 2px 8px rgba(0, 166, 81, 0.25),
    inset 0 -2px 0 -1px rgba(0, 61, 43, 0.8),
    inset 0 0 2px 4px rgba(0, 199, 96, 0.8);
}

[data-theme="bnp-paribas"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(0, 84, 59, 0.98), rgba(0, 61, 43, 0.99));
  border-top: 2px solid #00a651;
  color: #ffffff;
}

[data-theme="bnp-paribas"] #generator-prompt-input {
  background: #00543b;
  border: 2px solid #006b4a;
  color: #ffffff;
}

[data-theme="bnp-paribas"] #generator-prompt-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Thème Société Générale */
[data-theme="societe-generale"] #generator-generate-btn {
  --primary: #e60028;
  background: #e60028;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(230, 0, 40, 0.6),
    0 5px 10px -2px rgba(230, 0, 40, 0.4),
    0 30px 25px -15px rgba(230, 0, 40, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 26, 61, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="societe-generale"] #generator-generate-btn:hover:not(:disabled) {
  background: #ff1a3d;
  box-shadow:
    inset 0 0 25px rgba(230, 0, 40, 0.7),
    0 8px 20px rgba(255, 26, 61, 0.35),
    0 35px 28px -15px rgba(255, 26, 61, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(230, 0, 40, 0.8);
}

[data-theme="societe-generale"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(230, 0, 40, 0.5),
    0 2px 8px rgba(230, 0, 40, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 26, 61, 0.8);
}

[data-theme="societe-generale"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #e60028;
  color: #e60028;
}

[data-theme="societe-generale"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #e60028;
  color: #ffffff;
}

[data-theme="societe-generale"] #generator-prompt-input::placeholder {
  color: rgba(230, 0, 40, 0.4);
}

/* Thème JP Morgan */
[data-theme="jpmorgan"] #generator-generate-btn {
  --primary: #8b6f47;
  background: #8b6f47;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(45, 31, 20, 0.6),
    0 5px 10px -2px rgba(139, 111, 71, 0.4),
    0 30px 25px -15px rgba(139, 111, 71, 0.25),
    inset 0 -2px 0 -1px rgba(45, 31, 20, 0.8),
    inset 0 0 2px 4px rgba(201, 169, 97, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="jpmorgan"] #generator-generate-btn:hover:not(:disabled) {
  background: #a08159;
  box-shadow:
    inset 0 0 25px rgba(139, 111, 71, 0.7),
    0 8px 20px rgba(160, 129, 89, 0.35),
    0 35px 28px -15px rgba(160, 129, 89, 0.35),
    inset 0 -2px 0 -1px rgba(45, 31, 20, 0.8),
    inset 0 0 2px 4px rgba(201, 169, 97, 0.8);
}

[data-theme="jpmorgan"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(45, 31, 20, 0.5),
    0 2px 8px rgba(139, 111, 71, 0.25),
    inset 0 -2px 0 -1px rgba(45, 31, 20, 0.8),
    inset 0 0 2px 4px rgba(201, 169, 97, 0.8);
}

[data-theme="jpmorgan"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(61, 42, 27, 0.98), rgba(45, 31, 20, 0.99));
  border-top: 2px solid #c9a961;
  color: #e8dcc8;
}

[data-theme="jpmorgan"] #generator-prompt-input {
  background: #3d2a1b;
  border: 2px solid #4d3522;
  color: #e8dcc8;
}

[data-theme="jpmorgan"] #generator-prompt-input::placeholder {
  color: rgba(232, 220, 200, 0.4);
}

/* Thème Goldman Sachs */
[data-theme="goldman-sachs"] #generator-generate-btn {
  --primary: #7a9bba;
  background: #7a9bba;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(74, 107, 138, 0.6),
    0 5px 10px -2px rgba(122, 155, 186, 0.4),
    0 30px 25px -15px rgba(122, 155, 186, 0.25),
    inset 0 -2px 0 -1px rgba(74, 107, 138, 0.8),
    inset 0 0 2px 4px rgba(138, 171, 202, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="goldman-sachs"] #generator-generate-btn:hover:not(:disabled) {
  background: #8aabca;
  box-shadow:
    inset 0 0 25px rgba(122, 155, 186, 0.7),
    0 8px 20px rgba(138, 171, 202, 0.35),
    0 35px 28px -15px rgba(138, 171, 202, 0.35),
    inset 0 -2px 0 -1px rgba(74, 107, 138, 0.8),
    inset 0 0 2px 4px rgba(122, 155, 186, 0.8);
}

[data-theme="goldman-sachs"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(74, 107, 138, 0.5),
    0 2px 8px rgba(122, 155, 186, 0.25),
    inset 0 -2px 0 -1px rgba(74, 107, 138, 0.8),
    inset 0 0 2px 4px rgba(138, 171, 202, 0.8);
}

[data-theme="goldman-sachs"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(90, 123, 154, 0.98), rgba(74, 107, 138, 0.99));
  border-top: 2px solid #7a9bba;
  color: #ffffff;
}

[data-theme="goldman-sachs"] #generator-prompt-input {
  background: #5a7b9a;
  border: 2px solid #6a8baa;
  color: #ffffff;
}

[data-theme="goldman-sachs"] #generator-prompt-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Thème Microsoft */
[data-theme="microsoft"] #generator-generate-btn {
  --primary: #0078d4;
  background: #0078d4;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(0, 108, 190, 0.6),
    0 5px 10px -2px rgba(0, 120, 212, 0.4),
    0 30px 25px -15px rgba(0, 120, 212, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(179, 176, 173, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

[data-theme="microsoft"] #generator-generate-btn:hover:not(:disabled) {
  background: #006cbe;
  box-shadow:
    inset 0 0 25px rgba(0, 108, 190, 0.7),
    0 8px 20px rgba(0, 108, 190, 0.35),
    0 35px 28px -15px rgba(0, 108, 190, 0.35),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(179, 176, 173, 0.8);
}

[data-theme="microsoft"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 108, 190, 0.5),
    0 2px 8px rgba(0, 120, 212, 0.25),
    inset 0 -2px 0 -1px rgba(72, 78, 96, 0.8),
    inset 0 0 2px 4px rgba(179, 176, 173, 0.8);
}

[data-theme="microsoft"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(243, 243, 243, 0.98), rgba(255, 255, 255, 0.99));
  border-top: 2px solid #0078d4;
  color: #323130;
}

[data-theme="microsoft"] #generator-prompt-input {
  background: #ffffff;
  border: 2px solid #d2d0ce;
  color: #323130;
}

[data-theme="microsoft"] #generator-prompt-input::placeholder {
  color: rgba(50, 49, 48, 0.4);
}

/* Thèmes Dark-... - Barre de prompt sombre */
[data-theme="dark-red"] #generator-generate-btn {
  --primary: #c73636;
  background: #c73636;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(199, 54, 54, 0.6),
    0 5px 10px -2px rgba(199, 54, 54, 0.4),
    0 30px 25px -15px rgba(199, 54, 54, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 72, 72, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark-red"] #generator-generate-btn:hover:not(:disabled) {
  background: #d84a4a;
  box-shadow:
    inset 0 0 25px rgba(216, 74, 74, 0.7),
    0 8px 20px rgba(216, 74, 74, 0.35),
    0 35px 28px -15px rgba(216, 74, 74, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 72, 72, 0.8);
}

[data-theme="dark-red"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(199, 54, 54, 0.5),
    0 2px 8px rgba(199, 54, 54, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 72, 72, 0.8);
}

[data-theme="dark-red"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #c73636;
  color: #ff4848;
}

[data-theme="dark-red"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #c73636;
  color: #ffffff;
}

[data-theme="dark-red"] #generator-prompt-input::placeholder {
  color: rgba(255, 72, 72, 0.4);
}

[data-theme="dark-green"] #generator-generate-btn {
  --primary: #36c736;
  background: #36c736;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    0 5px 10px -2px rgba(54, 199, 54, 0.4),
    0 30px 25px -15px rgba(54, 199, 54, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(72, 255, 72, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark-green"] #generator-generate-btn:hover:not(:disabled) {
  background: #4ad84a;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.7),
    0 8px 20px rgba(74, 216, 74, 0.35),
    0 35px 28px -15px rgba(74, 216, 74, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(72, 255, 72, 0.8);
}

[data-theme="dark-green"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(54, 199, 54, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(72, 255, 72, 0.8);
}

[data-theme="dark-green"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #36c736;
  color: #48ff48;
}

[data-theme="dark-green"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #36c736;
  color: #ffffff;
}

[data-theme="dark-green"] #generator-prompt-input::placeholder {
  color: rgba(72, 255, 72, 0.4);
}

[data-theme="dark-purple"] #generator-generate-btn {
  --primary: #8c36c7;
  background: #8c36c7;
  color: #ffffff;
  box-shadow:
    inset 0 0 20px rgba(140, 54, 199, 0.6),
    0 5px 10px -2px rgba(140, 54, 199, 0.4),
    0 30px 25px -15px rgba(140, 54, 199, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(186, 72, 255, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark-purple"] #generator-generate-btn:hover:not(:disabled) {
  background: #9c4ad8;
  box-shadow:
    inset 0 0 25px rgba(156, 74, 216, 0.7),
    0 8px 20px rgba(156, 74, 216, 0.35),
    0 35px 28px -15px rgba(156, 74, 216, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(186, 72, 255, 0.8);
}

[data-theme="dark-purple"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(140, 54, 199, 0.5),
    0 2px 8px rgba(140, 54, 199, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(186, 72, 255, 0.8);
}

[data-theme="dark-purple"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #8c36c7;
  color: #ba48ff;
}

[data-theme="dark-purple"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #8c36c7;
  color: #ffffff;
}

[data-theme="dark-purple"] #generator-prompt-input::placeholder {
  color: rgba(186, 72, 255, 0.4);
}

[data-theme="dark-orange"] #generator-generate-btn {
  --primary: #c78036;
  background: #c78036;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    0 5px 10px -2px rgba(199, 128, 54, 0.4),
    0 30px 25px -15px rgba(199, 128, 54, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 168, 72, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark-orange"] #generator-generate-btn:hover:not(:disabled) {
  background: #d8944a;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.7),
    0 8px 20px rgba(216, 148, 74, 0.35),
    0 35px 28px -15px rgba(216, 148, 74, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 168, 72, 0.8);
}

[data-theme="dark-orange"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(199, 128, 54, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 168, 72, 0.8);
}

[data-theme="dark-orange"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #c78036;
  color: #ffa848;
}

[data-theme="dark-orange"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #c78036;
  color: #ffffff;
}

[data-theme="dark-orange"] #generator-prompt-input::placeholder {
  color: rgba(255, 168, 72, 0.4);
}

[data-theme="dark-cyan"] #generator-generate-btn {
  --primary: #36b8c7;
  background: #36b8c7;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    0 5px 10px -2px rgba(54, 184, 199, 0.4),
    0 30px 25px -15px rgba(54, 184, 199, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(72, 223, 255, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark-cyan"] #generator-generate-btn:hover:not(:disabled) {
  background: #4ac8d8;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.7),
    0 8px 20px rgba(74, 200, 216, 0.35),
    0 35px 28px -15px rgba(74, 200, 216, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(72, 223, 255, 0.8);
}

[data-theme="dark-cyan"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(54, 184, 199, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(72, 223, 255, 0.8);
}

[data-theme="dark-cyan"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #36b8c7;
  color: #48dfff;
}

[data-theme="dark-cyan"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #36b8c7;
  color: #ffffff;
}

[data-theme="dark-cyan"] #generator-prompt-input::placeholder {
  color: rgba(72, 223, 255, 0.4);
}

[data-theme="dark-yellow"] #generator-generate-btn {
  --primary: #c7b836;
  background: #c7b836;
  color: #000000;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.6),
    0 5px 10px -2px rgba(199, 184, 54, 0.4),
    0 30px 25px -15px rgba(199, 184, 54, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 239, 72, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark-yellow"] #generator-generate-btn:hover:not(:disabled) {
  background: #d8c84a;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.7),
    0 8px 20px rgba(216, 200, 74, 0.35),
    0 35px 28px -15px rgba(216, 200, 74, 0.35),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 239, 72, 0.8);
}

[data-theme="dark-yellow"] #generator-generate-btn:active:not(:disabled) {
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(199, 184, 54, 0.25),
    inset 0 -2px 0 -1px rgba(0, 0, 0, 0.8),
    inset 0 0 2px 4px rgba(255, 239, 72, 0.8);
}

[data-theme="dark-yellow"] .generator-prompt-bar {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(0, 0, 0, 0.99));
  border-top: 2px solid #c7b836;
  color: #ffef48;
}

[data-theme="dark-yellow"] #generator-prompt-input {
  background: #1a1a1a;
  border: 2px solid #c7b836;
  color: #ffffff;
}

[data-theme="dark-yellow"] #generator-prompt-input::placeholder {
  color: rgba(255, 239, 72, 0.4);
}

/* ===================================
   ANIMATIONS
   =================================== */

.generator-panel {
  animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */

.panel-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.panel-content::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.panel-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ===================================
   VALIDATION BAR
   =================================== */

.html-validation-bar {
  position: fixed;
  bottom: 95px; /* Juste au-dessus de la barre de prompt */
  left: 260px; /* Sidebar width */
  right: 0;
  background: linear-gradient(to bottom, #3b82f6, #2563eb);
  color: white;
  padding: 0.5rem 1rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 20px rgba(59, 130, 246, 0.4);
  z-index: 1001;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0.3s ease;
  max-height: 60px;
  opacity: 0;
  transform: translateY(100%);
}

/* When sidebar is collapsed - utiliser le sélecteur correct */
.sidebar.collapsed ~ .main-container .html-validation-bar,
body.sidebar-collapsed .html-validation-bar {
  left: 0 !important;
}

@keyframes slideUpFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .html-validation-bar {
    left: 0;
    bottom: auto;
    top: 60px; /* Sous la barre du haut sur mobile */
    flex-direction: column;
    gap: 1rem;
  }
}

.validation-message {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.validation-message i {
  font-size: 0.9rem;
}

.validation-actions {
  display: flex;
  gap: 0.4rem;
}

.btn-validation {
  padding: 0.4rem 0.9rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.btn-validation i {
  font-size: 0.85rem;
}

.btn-modify {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-modify:hover {
  background: rgba(255, 255, 255, 0.3);
}

.btn-discard {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

.btn-discard:hover {
  background: rgba(239, 68, 68, 1);
}

.btn-validate {
  background: #10b981;
  color: white;
}

.btn-validate:hover {
  background: #059669;
}

/* When sidebar is collapsed */
@media (max-width: 768px) {
  .html-validation-bar {
    flex-direction: column;
  }
}

/* ===================================
   FULLSCREEN MODE
   =================================== */

/* Mode plein écran pour l'aperçu HTML */
body.html-preview-fullscreen {
  overflow: hidden;
}

body.html-preview-fullscreen .sidebar,
body.html-preview-fullscreen .code-generator-header,
body.html-preview-fullscreen .generator-prompt-bar,
body.html-preview-fullscreen .html-validation-bar,
body.html-preview-fullscreen .generator-panel:first-child,
body.html-preview-fullscreen #editor-panel {
  display: none !important;
}

body.html-preview-fullscreen .generator-panel:last-child {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  animation: none !important;
}

body.html-preview-fullscreen .generator-panel:last-child .panel-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.html-preview-fullscreen .generator-panel:last-child .panel-content {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
}

body.html-preview-fullscreen .generator-panel:last-child .panel-content iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

body.html-preview-fullscreen .generation-status {
  display: none !important;
}

/* Transition douce pour l'entrée en mode plein écran */
body.html-preview-fullscreen .generator-panel:last-child {
  transition: all 0.3s ease;
}

/* Bouton de sortie du plein écran */
#generator-fullscreen-btn.active i::before {
  content: "\f066"; /* fa-compress */
}

#generator-fullscreen-btn i {
  transition: transform 0.2s ease;
}

#generator-fullscreen-btn:hover i {
  transform: scale(1.1);
}

/* Bouton flottant pour sortir du plein écran */
.generator-exit-fullscreen-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-on-surface);
  font-size: 18px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.generator-exit-fullscreen-btn:hover {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.generator-exit-fullscreen-btn:active {
  transform: scale(0.95);
}

.generator-exit-fullscreen-btn i {
  pointer-events: none;
}