@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');


:root {
  --bg: #111827;
  --accent1: #FF8C00;
  --accent2: #B22222;
  --assistant: #1F2937;
  --text: #F3F4F6;
  --text-light: #9CA3AF;
  --input-bg: rgba(31,41,55,0.8);
  --border: rgba(255,255,255,0.1);
  --shadow: rgba(0,0,0,0.4);
  --input-height: 56px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0 }
html, body {
  width: 100%; height: 100%;
  background: var(--assistant);
  color: var(--text);
  font-family: "Oswald", sans-serif;
  overflow: hidden;
}
.background-alpha {
    position: fixed;
    inset: 0;
    z-index: 2; /* Assurez-vous qu'il est derrière tout le contenu */
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .background-alpha::before {
    content: "ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA ALPHA";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 3rem; /* Ajustez la taille selon vos besoins */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.03); /* Faible opacité */
    white-space: pre-wrap; /* Permet de conserver les sauts de ligne */
    line-height: 4rem; /* Ajustez l'espacement vertical */
    text-align: center;
    pointer-events: none;
    overflow: hidden;
  }

/* Tracks animation */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%);
    background-size: 20px 20px;
    z-index: -2;
  }
@keyframes moveTracks { to { background-position: 100px 0 } }

/* Floating dumbbells */
.float-dumbbells {
  position: fixed;
  top: 10%; left: 50%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}
.float-dumbbells span {
  font-size: 3rem;
  animation: floatUp 6s ease-in-out infinite;
}
.float-dumbbells span:nth-child(2) { animation-delay: 2s }
.float-dumbbells span:nth-child(3) { animation-delay: 4s }
@keyframes floatUp {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.05 }
  50%      { transform: translateY(-20px) scale(1.1); opacity: 0.1 }
}

/* Main container & centering intro */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2rem;            
  height: calc(100vh - var(--input-height));
}
.chat-box {
  width: 600px;
  max-width: 90%;
  display: flex;
  flex-direction: column;
}

/* Intro */
#intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--text-light);
  font-size: 1.5rem;
  opacity: 1;
  transition: all 0.5s ease;
  z-index: 1;
}
#intro .icon { font-size: 2rem }

/* Chat flow */
.chat-container {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  padding: 0 1rem;
  scroll-padding-bottom: var(--input-height);
  max-height: calc(100vh - 150px);
  padding-bottom: 6.5rem;
}
.chat-container::-webkit-scrollbar {
  width: 8px;
}
.chat-container::-webkit-scrollbar-thumb {
  background: var(--text-light);
  border-radius: 4px;
}
.chat-container::-webkit-scrollbar-thumb:hover {
  background: var(--text);
}
@media (max-width: 640px) {
  .chat-container {
    padding-bottom: 8.5rem; /* Plus grand pour mobile si besoin */
  }
}

.known-bug {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-light); /* Couleur plus discrète */
  line-height: 1.4;
}
.known-bug strong {
  color: var(--accent1); /* Couleur pour mettre en évidence le titre */
}
.known-bug em {
  font-style: italic;
}



/* Effet d'explosion */
@keyframes explode {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.5);
      opacity: 0.5;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
  
  .letter {
    display: inline-block;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  }
  
  /* Bulles de messages */
  .bubble {
    position: relative;
    display: inline-block;
    max-width: 80%;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    border-radius: 16px;
    box-shadow: 0 2px 8px var(--shadow);
    line-height: 1.4;
    word-break: break-word;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .bubble.user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    color: #222;
    border-radius: 16px 16px 4px 16px;
  }
  .bubble.assistant {
    align-self: flex-start;
    background: var(--assistant);
    color: var(--text);
    border-radius: 16px 16px 16px 4px;
  }r-radius: 16px 16px 16px 4px;
}
.bubble.assistant::after {
  content: ""; position: absolute;
  bottom: 8px; left: -6px;
  border: 6px solid transparent;
  border-right-color: var(--assistant);
}
.bubble:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 12px var(--shadow);
}

/* Loader */
.rep-loader {
  display: flex; justify-content: center;
  font-size: 1.25rem;
  color: var(--text-light);
  margin: 1rem 0;
}
#rep-count { font-weight: 700; margin-right: 0.25rem; }

/* Barre d'entrée de style Copilot */
.input-area {
  position: fixed;
  bottom: 1rem; /* Passe de 1rem à 0 pour coller au bas de l'écran */
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 100vw;
  background: var(--input-bg);
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.5rem) 1rem;
  z-index: 2;
}

/* Pour mobile, élargir et coller en bas */
@media (max-width: 640px) {
  .input-area {
    left: 0;
    transform: none;
    width: 100vw;
    border-radius: 1rem 1rem 0 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  }
}

.input-area .inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.input-area textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 1rem;
    resize: none;
    height: 2rem;
    padding: 0.5rem;
}

.input-area textarea::placeholder {
    color: var(--text-light);
}

.input-area button {
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    color: #222;
    border: none;
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .input-area button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px var(--shadow);
  }

.input-area button:disabled {
    opacity: 0.5;
    cursor: default;
}
/* Programme formatting */
.divider { border: none; border-top: 2px solid rgba(255,255,255,0.2); margin: 1rem 0 }
.prog-step { margin: 1rem 0 0.5rem; font-weight: bold; font-size: 1.1rem }
.prog-list { list-style: disc inside; margin: 0 0 1rem 1rem }
.prog-text { margin: 0.5rem 0 }

/* Responsive */
@media (max-width: 640px) {
  .chat-box { width: 100% }
  #intro { font-size: 1rem; margin: 0.5rem }
  .bubble { max-width: 90%; padding: 0.5rem 0.75rem }
  .input-area .inner { width: 100%; padding: 0 8px }
  .input-area textarea,
  .input-area button { font-size: 0.9rem }
}
/* Bouton "Report a bug" */
.report-bug {
  position: fixed;
  bottom: 4rem; /* Augmentez la distance par rapport au bas */
  right: 1rem;
  background: var(--accent1);
  color: #fff;
  border: none;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.report-bug:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 640px) {
  .report-bug {
    bottom: 5rem; /* Ajustez pour laisser plus d'espace sur mobile */
    right: 0.5rem; /* Réduisez la marge à droite si nécessaire */
    font-size: 0.9rem; /* Réduisez légèrement la taille du bouton */
  }

  .input-area {
    padding-bottom: 1.5rem; /* Ajoutez un espace pour éviter que le bouton chevauche */
  }
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--assistant);
  color: var(--text);
  padding: 2rem;
  border-radius: 1rem;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.modal-content h2 {
  margin-bottom: 1rem;
}

.modal-content textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
}

.modal-content button {
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.modal-content button#generate-mailto {
  background: var(--accent1);
  color: #fff;
}

.modal-content button#close-bug-modal {
  background: var(--text-light);
  color: #000;
}
/* Modal */
/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 1rem; /* Ajout de padding pour éviter que le contenu touche les bords */
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--assistant);
  color: var(--text);
  padding: 1.5rem;
  border-radius: 1rem;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  overflow-y: auto; /* Permet de scroller si le contenu dépasse */
  max-height: 90%; /* Limite la hauteur pour éviter de dépasser l'écran */
}

.modal-content h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-align: center;
}

.modal-content p {
  margin-bottom: 1rem;
  line-height: 1.5;
  font-size: 1rem;
}

.modal-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--accent1);
}

.modal-content ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  list-style-type: disc;
}

.modal-content ul li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.modal-content button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--accent1);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
  width: 100%; /* Bouton large sur mobile */
  max-width: 200px; /* Limite la largeur sur desktop */
  align-self: center;
}

.loader-dots {
  font-size: 1.1rem;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
}
.loader-dots .dot {
  transition: opacity 0.2s;
  font-weight: bold;
  font-size: 1.3em;
  color: var(--accent1, #f77);
  opacity: 0.2;
  margin-left: 2px;
}
.loader-hint {
  font-size: 0.95em;
  color: var(--text-light, #888);
  margin-left: 0.5em;
  font-style: italic;
}