/* style sombre modale input */
.ide-python-input-overlay {
  display: none; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-color: rgba(0, 0, 0, 0.35); 
  z-index: 1000; 
  align-items: center; 
  justify-content: center;
}

.ide-python-input-overlay form {
  background-color: #2b2b2b; 
  padding: 20px; 
  border-radius: 8px; 
  border: 1px solid #444;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  min-width: 300px; 
  max-width: 80%;
}

.ide-python-input-overlay label {
  color: #ccc; 
  display: block; 
  margin-bottom: 10px;
}

.ide-python-input-overlay input {
  background-color: #1e1e1e; 
  color: #f8f8f2; 
  border: 1px solid #555; 
  margin-bottom: 10px;
}

.ide-python-input-overlay .form-control:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.ide-python-input-overlay form button {
  position: relative;
  z-index: 1001;
  cursor: pointer;
}

.ide-python-input-overlay form button:disabled {
  cursor: not-allowed;
}

/* ------------------------------------------------ */

.ide-python-output {
  height: 150px; 
  overflow-y: auto;
}

.ide-python-editor {
  min-height: 100px; 
  width: 100%
}

/* Coloration syntaxique dans la console */
py-ide .py-console-line {
  white-space: pre-wrap;
  margin: 0;
  font-family: monospace;
}

py-ide .py-console-line.stdout {
  color: #f8f8f2;
}

py-ide .py-console-line.stderr {
  color: #ff5555;
}

py-ide .py-console-line.info {
  color: #6272a4;
  font-style: italic;
}

/* Chronomètre d'exécution : barre animée en CSS.
   L'animation porte sur transform (scaleX) → gérée par le thread compositeur,
   elle reste donc animée même quand le thread principal est bloqué par Pyodide
   (ex. boucle infinie), là où un décompte numérique JS/CSS se figerait. */
py-ide .ide-python-timer {
  display: none;
  width: 90px;
  height: 6px;
  margin-left: 6px;
  background: #44475a;
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}

py-ide .ide-python-timer.visible {
  display: inline-block;
}

py-ide .ide-python-timer-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: #0DCAF0;
}

py-ide .ide-python-timer.running .ide-python-timer-bar {
  animation: ide-python-timer-fill var(--ide-python-timeout, 10s) linear forwards;
}

@keyframes ide-python-timer-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Fenêtre modale de rendu graphique (matplotlib, turtle, PIL…). */
.ide-python-graphics-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 16px;
}

.ide-python-graphics-modal-dialog {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  max-width: min(900px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ide-python-graphics-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
}

.ide-python-graphics-modal-title {
  font-weight: 600;
}

.ide-python-graphics-modal-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #6c757d;
}

.ide-python-graphics-modal-close:hover {
  color: #000;
}

.ide-python-graphics-modal-body {
  padding: 12px;
  overflow: auto;
  text-align: center;
}

.ide-python-graphic {
  display: inline-block;
  margin: 6px;
  vertical-align: top;
}

.ide-python-graphic img,
.ide-python-graphic svg {
  max-width: 100%;
  height: auto;
}

.ide-python-graphic-export {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}

.ide-python-graphic-export-btn {
  font-size: 0.7rem;
  padding: 1px 8px;
  line-height: 1.4;
}

/* Toolbar d'export en bas du graphique plein écran (centrage via .choco-fs-center) */
.ide-python-graphic.full-screen .ide-python-graphic-export {
  margin-top: 0;
  flex-shrink: 0;
}

/* Optimisations pour les performances */
py-ide {
  contain: layout style; /* Isolation pour améliorer les performances */
  will-change: auto; /* Préparer pour les animations */
}

/* Optimisations pour ACE Editor - HAUTEUR LIMITÉE */
py-ide .ace_editor {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  line-height: 1.4;
  max-height: 700px !important; /* Limite absolue */
  overflow-y: auto; /* Scrollbar si nécessaire */
}

py-ide .ace_scrollbar-v {
  /* Assure que la scrollbar est visible quand nécessaire */
  display: block !important;
}

py-ide .ace_scroller {
  /* Optimisation du scrolling */
  overflow-anchor: none;
  scroll-behavior: auto;
}

/* Réduire l'espace général autour des IDEs */
py-ide .ide-python-container {
  border: 0px;
  transition: none; /* Supprimer les transitions pour plus de fluidité */
}

/* Les boutons du haut de l'éditeur */
py-ide .ide-python-header {
  padding: 5px 5px 2px 5px;
  border-bottom: none; 
}

/* Rapprocher l'éditeur de la console */
py-ide .ide-python-body {
  padding: 0px 5px 1px 5px;
}

/* Rapprocher l'éditeur de la console */
py-ide .ide-python-header button {
  margin: 0px;
}


py-ide #editor {
  margin-bottom: 0px;
}

py-ide pre { /* La console est un <pre> */
  margin: 0px;
  padding: 5px 10px 5px 10px;
  overflow-anchor: none;  /* Optimisations pour le scrolling */
  scroll-behavior: auto;
}

/* Optimisations pour ACE Editor */
py-ide .ace_editor {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  line-height: 1.4;
}

/* Améliorer le rendu du texte */
py-ide .ace_editor, .py-console-line {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/* Optimisations pour le chargement */
py-ide {
  /* Éviter les reflows pendant le chargement */
  min-height: 200px;
}

/* Spinner de chargement optimisé */
py-ide .spinner-border {
  animation-duration: 0.8s;
}

/* Optimisation des barres de défilement */
py-ide pre::-webkit-scrollbar {
  width: 8px;
}

py-ide pre::-webkit-scrollbar-track {
  background: #1e1e1e;
}

py-ide pre::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

py-ide pre::-webkit-scrollbar-thumb:hover {
  background: #666;
}
/* ------------------------------------------------ */
/* Fichiers de l'environnement (PythonIDEFiles.js)   */
/* ------------------------------------------------ */
/* Onglets de fichiers, à droite au-dessus de la visionneuse ; couleur selon l'origine
   (variables Bootstrap : suivent le thème clair ou sombre). Fourni : ambre, ajouté ou partagé : bleu, produit : vert. */
py-ide .ide-python-files {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 2px;
  padding: 0 5px;
  font-size: 0.8rem;
}
py-ide .ide-python-file {
  --ide-file-bg: var(--bs-primary-bg-subtle, #cfe2ff);
  --ide-file-border: var(--bs-primary-border-subtle, #9ec5fe);
  --ide-file-text: var(--bs-primary-text-emphasis, #052c65);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 2px 8px;
  border: 1px solid var(--ide-file-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--ide-file-bg);
  color: var(--ide-file-text);
  white-space: nowrap;
}
py-ide .ide-python-file-preexistant {
  --ide-file-bg: var(--bs-warning-bg-subtle, #fff3cd);
  --ide-file-border: var(--bs-warning-border-subtle, #ffe69c);
  --ide-file-text: var(--bs-warning-text-emphasis, #664d03);
}
py-ide .ide-python-file-produit {
  --ide-file-bg: var(--bs-success-bg-subtle, #d1e7dd);
  --ide-file-border: var(--bs-success-border-subtle, #a3cfbb);
  --ide-file-text: var(--bs-success-text-emphasis, #0a3622);
  font-style: italic;
}
py-ide .ide-python-file:hover {
  filter: brightness(0.94);
}
py-ide .ide-python-file:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: -2px;
}
/* Onglet actif : plus marqué, relié à la visionneuse */
py-ide .ide-python-file-active {
  border-width: 2px 2px 0 2px;
  border-color: var(--ide-file-text);
  font-weight: 600;
  filter: none !important;
}
py-ide .ide-python-file-action {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 3px;
  line-height: 1;
  opacity: 0.7;
}
py-ide .ide-python-file-action:hover {
  opacity: 1;
}

/* Éditeur et console à gauche, visionneuse à droite sur toute leur hauteur (dessous sur petit écran) */
py-ide .ide-python-body {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
py-ide .ide-python-left {
  flex: 1 1 auto;
  min-width: 0;
}
py-ide .ide-python-viewer {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--bs-border-color, #ccc);
  border-radius: 6px 0 6px 6px;
  background: var(--bs-body-bg, #fff);
  overflow: hidden;
}
py-ide .ide-python-viewer-preexistant { border-color: var(--bs-warning-text-emphasis, #664d03); }
py-ide .ide-python-viewer-ajout,
py-ide .ide-python-viewer-partage { border-color: var(--bs-primary-text-emphasis, #052c65); }
py-ide .ide-python-viewer-produit { border-color: var(--bs-success-text-emphasis, #0a3622); }
py-ide .ide-python-viewer-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
py-ide .ide-python-viewer-text {
  flex: 1 1 auto;
  width: 100%;
  min-height: 150px;
  padding: 4px 8px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: inherit;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  white-space: pre;
  overflow-wrap: normal;
}
py-ide .ide-python-viewer-image {
  max-width: 100%;
  height: auto;
  margin: auto;
  padding: 4px;
}
py-ide .ide-python-viewer-message {
  margin: auto;
  padding: 8px;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.85rem;
  text-align: center;
}
@media (max-width: 768px) {
  py-ide .ide-python-body {
    flex-direction: column;
  }
  py-ide .ide-python-viewer {
    flex-basis: auto;
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
  }
}
py-ide .ide-python-drop {
  outline: 2px dashed var(--bs-primary, #0d6efd);
  outline-offset: -2px;
}

/* ------------------------------------------------ */
/* Collaboration (PythonIDECollab.js)                */
/* ------------------------------------------------ */
:root {
  --ide-collab-c0: #e6194b; --ide-collab-c1: #3cb44b; --ide-collab-c2: #4363d8; --ide-collab-c3: #f58231;
  --ide-collab-c4: #911eb4; --ide-collab-c5: #42d4f4; --ide-collab-c6: #f032e6; --ide-collab-c7: #9a6324;
  --ide-collab-c8: #469990; --ide-collab-c9: #808000;
}
/* Session active : boutons du partage regroupés et mis en évidence (orange si la connexion est perdue) */
py-ide .ide-collab-active {
  padding: 1px 4px 1px 6px;
  border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
  border-radius: 14px;
  background: var(--bs-success-bg-subtle, #d1e7dd);
}
py-ide .ide-collab-active .btn,
py-ide .ide-collab-active .icone-aide {
  color: var(--bs-success-text-emphasis, #0a3622);
}
py-ide .ide-collab-active.ide-collab-offline {
  border-color: var(--bs-warning-border-subtle, #ffe69c);
  background: var(--bs-warning-bg-subtle, #fff3cd);
}
py-ide .ide-collab-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-success, #198754);
  animation: ide-collab-pulse 2s ease-in-out infinite;
}
py-ide .ide-collab-offline .ide-collab-live {
  background: var(--bs-warning, #ffc107);
  animation: none;
}
@keyframes ide-collab-pulse {
  50% { opacity: 0.35; }
}
/* Menu du bouton de partage (tippy, ajouté au <body>) */
.ide-collab-menu {
  min-width: 220px;
  text-align: left;
}
.ide-collab-peer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.65rem;
  font-weight: bold;
  cursor: default;
}
py-ide .ide-collab-peer.ide-collab-owner-view {
  cursor: pointer;
}
py-ide .ide-collab-more {
  margin-left: 5px;
  font-size: 0.75rem;
}
/* Participant en lecture seule : pastille évidée */
.ide-collab-peer.ide-collab-lecteur {
  background: transparent !important;
  border: 2px solid currentColor;
}
.ide-collab-peer.ide-collab-lecteur.ide-collab-c0 { color: var(--ide-collab-c0); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c1 { color: var(--ide-collab-c1); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c2 { color: var(--ide-collab-c2); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c3 { color: var(--ide-collab-c3); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c4 { color: var(--ide-collab-c4); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c5 { color: var(--ide-collab-c5); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c6 { color: var(--ide-collab-c6); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c7 { color: var(--ide-collab-c7); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c8 { color: var(--ide-collab-c8); }
.ide-collab-peer.ide-collab-lecteur.ide-collab-c9 { color: var(--ide-collab-c9); }
/* Droits (propriétaire) : bouton allumé quand le droit est accordé */
.ide-collab-toggle.active {
  color: #fff !important;
  background: var(--bs-success, #198754) !important;
}
/* Panneau des participants (tippy, ajouté au <body>) */
.ide-collab-panel-list {
  max-height: 260px;
  overflow-y: auto;
}
.ide-collab-panel-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.ide-collab-panel-row .ide-collab-panel-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
py-ide .ide-collab.ide-collab-offline .ide-collab-peer {
  filter: grayscale(1);
  opacity: 0.6;
}
/* Curseurs et sélections des autres participants (marqueurs ACE et couche au-dessus de l'éditeur) */
py-ide .ide-collab-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
py-ide .ide-collab-selection {
  position: absolute;
  opacity: 0.25;
}
py-ide .ide-collab-caret {
  position: absolute;
  width: 2px !important;
}
py-ide .ide-collab-label {
  position: absolute;
  transform: translateY(-100%);
  padding: 0 4px;
  border-radius: 3px 3px 3px 0;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}
/* Gouttière : dernier auteur de chaque ligne */
.ide-collab-c0 { background: var(--ide-collab-c0); }
py-ide .ace_gutter-cell.ide-collab-row-c0 { box-shadow: inset 3px 0 0 var(--ide-collab-c0); }
.ide-collab-c1 { background: var(--ide-collab-c1); }
py-ide .ace_gutter-cell.ide-collab-row-c1 { box-shadow: inset 3px 0 0 var(--ide-collab-c1); }
.ide-collab-c2 { background: var(--ide-collab-c2); }
py-ide .ace_gutter-cell.ide-collab-row-c2 { box-shadow: inset 3px 0 0 var(--ide-collab-c2); }
.ide-collab-c3 { background: var(--ide-collab-c3); }
py-ide .ace_gutter-cell.ide-collab-row-c3 { box-shadow: inset 3px 0 0 var(--ide-collab-c3); }
.ide-collab-c4 { background: var(--ide-collab-c4); }
py-ide .ace_gutter-cell.ide-collab-row-c4 { box-shadow: inset 3px 0 0 var(--ide-collab-c4); }
.ide-collab-c5 { background: var(--ide-collab-c5); }
py-ide .ace_gutter-cell.ide-collab-row-c5 { box-shadow: inset 3px 0 0 var(--ide-collab-c5); }
.ide-collab-c6 { background: var(--ide-collab-c6); }
py-ide .ace_gutter-cell.ide-collab-row-c6 { box-shadow: inset 3px 0 0 var(--ide-collab-c6); }
.ide-collab-c7 { background: var(--ide-collab-c7); }
py-ide .ace_gutter-cell.ide-collab-row-c7 { box-shadow: inset 3px 0 0 var(--ide-collab-c7); }
.ide-collab-c8 { background: var(--ide-collab-c8); }
py-ide .ace_gutter-cell.ide-collab-row-c8 { box-shadow: inset 3px 0 0 var(--ide-collab-c8); }
.ide-collab-c9 { background: var(--ide-collab-c9); }
py-ide .ace_gutter-cell.ide-collab-row-c9 { box-shadow: inset 3px 0 0 var(--ide-collab-c9); }