styles.css

/* CSS Variables (avec valeurs de secours) */
:root {
  --primary-500: var(--primary-500, #6366F1); /* Indigo */
  --secondary-500: var(--secondary-500, #22C55E); /* Green */
}

/* Mise en page globale */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }

/* Container principal en 3 colonnes */
.container {
  display: flex;
  height: 100vh;
}

/* Colonne 1 : Sidebar */
.sidebar {
  width: 20%;
  min-width: 240px;
  background: rgb(248 250 252); /* slate-50 */
  border-right: 1px solid rgb(226 232 240); /* slate-200 */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dark .sidebar {
  background: rgb(15 23 42); /* slate-900 */
  border-right-color: rgb(30 41 59); /* slate-800 */
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: rgb(15 23 42);
  text-decoration: none;
}
.dark .logo { color: rgb(248 250 252); }

.menu { display: flex; flex-direction: column; gap: 8px; }
.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgb(241 245 249); /* slate-100 */
  color: rgb(15 23 42);
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  cursor: pointer;
}
.btn:hover { background: rgb(226 232 240); } /* slate-200 */
.dark .btn {
  background: rgb(30 41 59); /* slate-800 */
  color: rgb(226 232 240);
  border-color: rgb(51 65 85); /* slate-700 */
}
.dark .btn:hover { background: rgb(51 65 85); }

.projects h3 {
  font-size: 14px;
  color: rgb(100 116 139); /* slate-500 */
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dark .projects h3 { color: rgb(148 163 184); }

.project-list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; }
.project-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border: 1px solid rgb(226 232 240); border-radius: 8px;
  background: white;
}
.dark .project-list li { background: rgb(30 41 59); border-color: rgb(51 65 85); }
.project-list .actions { display: flex; gap: 6px; }
.project-list button {
  padding: 4px 6px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); border-radius: 6px; cursor: pointer;
}
.dark .project-list button { background: rgb(15 23 42); border-color: rgb(51 65 85); }

/* Colonne 2 : Chat */
.chat {
  width: 45%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}
.chat-header h2 { font-size: 18px; margin: 0; }
.activity-monitor {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgb(100 116 139);
}
.dark .activity-monitor { color: rgb(148 163 184); }
.dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: rgb(34 197 94); /* emerald-500 */
  display: inline-block;
}

.chat-messages {
  flex: 1;
  background: rgb(255 255 255);
  border: 1px solid rgb(226 232 240);
  border-radius: 12px;
  padding: 12px;
  overflow-y: auto;
}
.dark .chat-messages {
  background: rgb(2 6 23); /* slate-950 */
  border-color: rgb(30 41 59);
}

.msg {
  display: flex; gap: 10px; margin-bottom: 12px;
}
.msg-ai .avatar {
  width: 32px; height: 32px; border-radius: 9999px;
  display: grid; place-items: center;
  background: var(--primary-500);
  color: white;
}
.msg-user { justify-content: flex-end; }
.msg-user .bubble {
  background: var(--secondary-500);
  color: white;
  border-bottom-right-radius: 4px;
}
.msg-ai .bubble {
  background: rgb(241 245 249); color: rgb(15 23 42);
  border-bottom-left-radius: 4px;
}
.dark .msg-ai .bubble {
  background: rgb(30 41 59); color: rgb(226 232 240);
}
.bubble {
  max-width: 70%;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.chat-input {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.chat-input input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: white;
  outline: none;
}
.dark .chat-input input {
  background: rgb(2 6 23);
  border-color: rgb(30 41 59);
  color: rgb(226 232 240);
}
.chat-input button {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  cursor: pointer;
}
.dark .chat-input button {
  background: rgb(15 23 42);
  border-color: rgb(30 41 59);
}
.chat-input button:hover { background: rgb(241 245 249); }
.dark .chat-input button:hover { background: rgb(30 41 59); }

/* Micro button listening state */
#micBtn.listening {
  background: rgb(239, 68, 68); /* red-500 */
  border-color: rgb(239, 68, 68);
  animation: micPulse 1.2s infinite;
}
@keyframes micPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Small status dot improvements (used for activity too) */
.dot.listening { background: rgb(234,179,8); } /* amber-500 */
/* Colonne 3 : Output */
.output {
  width: 35%;
  min-width: 300px;
  background: rgb(252 252 252);
  border-left: 1px solid rgb(226 232 240);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}
.dark .output {
  background: rgb(12 16 24);
  border-left-color: rgb(30 41 59);
}

.output-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.output-tabs .tab-btn {
  padding: 8px;
  font-size: 12px;
  background: rgb(232 232 232);
  border: none;
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.output-tabs .tab-btn.active {
  background: var(--primary-500);
  color: white;
}

.code-output {
  flex: 1;
  background: #000;
  color: #0f0;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid rgb(30 41 59);
}
.code-output code { white-space: pre; display: block; }

.result-output {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  padding: 12px;
  text-align: center;
  border-radius: 10px;
}
.dark .result-output {
  background: rgb(2 6 23);
  border-color: rgb(30 41 59);
}

/* Thème (mode undefined = fallback par défaut déjà appliqué) */
.theme-toggle {
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  color: rgb(15 23 42);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.dark .theme-toggle {
  background: rgb(15 23 42);
  border-color: rgb(30 41 59);
  color: rgb(226 232 240);
}

/* Scrollbar (Webkit) */
.chat-messages::-webkit-scrollbar,
.code-output::-webkit-scrollbar {
  width: 10px;
}
.chat-messages::-webkit-scrollbar-thumb,
.code-output::-webkit-scrollbar-thumb {
  background: rgb(226 232 240);
  border-radius: 8px;
}
.dark .chat-messages::-webkit-scrollbar-thumb,
.dark .code-output::-webkit-scrollbar-thumb {
  background: rgb(51 65 85);
}

/* Responsive */
@media (max-width: 1100px) {
  .container { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgb(226 232 240); }
  .chat { width: 100%; }
  .output { width: 100%; }
}