html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  background: #17181c;
  color: #d6d8de;
  overflow: hidden;
}

/* ---------- Barre d'outils ---------- */

#toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 7px 10px;
  background: #20222a;
  border-bottom: 1px solid #34363f;
}

#toolbar .sep {
  width: 1px;
  height: 20px;
  background: #3a3d47;
  margin: 0 4px;
}

button {
  font: inherit;
  font-size: 12px;
  color: #d6d8de;
  background: #2c2f38;
  border: 1px solid #454956;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}

button:hover { background: #383c48; }
button.on { background: #2f6e3f; border-color: #3f9455; }

/* ---------- Canevas ---------- */

#wrap {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
}

#canvas {
  position: relative;
  width: 4000px;
  height: 3000px;
  background-image: radial-gradient(#24262e 1px, transparent 1px);
  background-size: 24px 24px;
}

#wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

path.wire {
  stroke: #8b90a0;
  stroke-width: 1.5;
  fill: none;
}

path.wire.signal { stroke: #4da3ff; stroke-width: 2.5; }
path.wire.selected { stroke: #ffd24d; }
path.wire.temp { stroke-dasharray: 5 4; }

path.hit {
  stroke: transparent;
  stroke-width: 10;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}

body.run path.hit { pointer-events: none; }

/* ---------- Boîtes ---------- */

.box {
  position: absolute;
  min-width: 46px;
  background: #2a2c34;
  border: 1px solid #6b7080;
  border-radius: 2px;
  user-select: none;
}

body.edit .box { cursor: move; }

.box.selected {
  border-color: #4da3ff;
  box-shadow: 0 0 0 1px #4da3ff;
}

.box.broken { border-style: dashed; border-color: #d95d5d; }

.box .content {
  padding: 4px 8px;
  white-space: pre;
  min-height: 16px;
  line-height: 16px;
  outline: none;
}

.box .content[contenteditable="true"] {
  user-select: text;
  cursor: text;
  background: #1c1e24;
}

/* Ports d'entrée / sortie */

.ports {
  display: flex;
  justify-content: space-between;
  height: 6px;
}

.port {
  width: 14px;
  height: 6px;
  background: #8b90a0;
  cursor: crosshair;
}

.port:hover { background: #ffd24d; }
.port.signal { background: #4da3ff; }
body.run .port { pointer-events: none; opacity: 0.45; }

/* Types de boîtes */

.box.msg { border-radius: 2px 9px 9px 2px; background: #32353f; }
.box.msg.flash { filter: brightness(1.6); }
body.run .box.msg { cursor: pointer; }

.box.number { border-radius: 2px 10px 2px 2px; }
.box.number .content { color: #ffd24d; min-width: 40px; }
body.run .box.number .content { cursor: ns-resize; }

.box.bang .content { padding: 4px; }
.bang-circle {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #8b90a0;
  border-radius: 50%;
}
.box.bang.flash .bang-circle { background: #ffd24d; }
body.run .box.bang { cursor: pointer; }

.box.toggle .content {
  width: 20px;
  height: 20px;
  padding: 2px;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #4da3ff;
}
body.run .box.toggle { cursor: pointer; }

.slider-track {
  position: relative;
  width: 160px;
  height: 18px;
  margin: 4px;
  background: #1c1e24;
  border: 1px solid #4a4e5a;
}
.slider-knob {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: #4da3ff;
}
body.run .slider-track { cursor: ew-resize; }

.box.comment {
  background: transparent;
  border-color: transparent;
  color: #878d9b;
  max-width: 420px;
}
.box.comment .content { white-space: pre-wrap; }
body.edit .box.comment { border: 1px dashed #3c3f4a; }

/* ---------- Console ---------- */

#console {
  flex: 0 0 90px;
  overflow-y: auto;
  background: #101114;
  border-top: 1px solid #34363f;
  padding: 4px 10px;
  font-size: 12px;
  color: #92b8d8;
}

#console div { padding: 1px 0; }

/* ---------- Aide ---------- */

#help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#help-overlay.hidden { display: none; }

#help-box {
  background: #22242c;
  border: 1px solid #454956;
  border-radius: 8px;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 18px 24px;
}

#help-box h2 { margin-top: 0; font-size: 16px; }
#help-box h3 { font-size: 13px; color: #9aa0aa; margin-bottom: 6px; }
#help-box table { border-collapse: collapse; width: 100%; }
#help-box td { padding: 2px 10px 2px 0; vertical-align: top; }
#help-box td:first-child { color: #ffd24d; white-space: nowrap; }
#help-box kbd {
  background: #2c2f38;
  border: 1px solid #454956;
  border-radius: 3px;
  padding: 0 5px;
  font-family: inherit;
}