/* Lumichat — UI mobile-first, sombre. Boutons uniformes, tactiles. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0b0f1a; color: #e6edf3;
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

#cam {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.35; z-index: 0;
  filter: contrast(1.1) brightness(0.7);
}

.bar {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(env(safe-area-inset-top), 10px) 14px 8px;
  background: linear-gradient(180deg, rgba(11,15,26,.92), rgba(11,15,26,0));
}
.brand { font-weight: 700; font-size: 17px; letter-spacing: .3px; }
.ver { font-size: 11px; font-weight: 400; opacity: .6; font-family: ui-monospace, Menlo, monospace; color: #7fd1ff; }
.ids { font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 8px; }
.ids b { color: #7fd1ff; font-variant-numeric: tabular-nums; }
.ids .sep { width: 1px; height: 14px; background: rgba(255,255,255,.2); }

.err {
  position: relative; z-index: 3;
  margin: 6px 12px; padding: 8px 12px;
  background: #3a0d12; border: 1px solid #ff4d6d; border-radius: 8px;
  color: #ffb3c0; font-size: 14px;
}

.chat {
  position: relative; z-index: 1;
  height: calc(100vh - 250px);
  overflow-y: auto;
  padding: 12px 12px 8px;
}
.msg { margin: 6px 0; max-width: 78%; }
.msg .who { font-size: 11px; opacity: .6; display: block; }
.msg .text {
  display: inline-block; padding: 8px 12px; border-radius: 14px;
  word-break: break-word; white-space: pre-wrap;
}
.msg.me { margin-left: auto; text-align: right; }
.msg.me .text { background: #1f6feb; color: #fff; }
.msg.them .text { background: #1c2330; border: 1px solid #2a3342; }

/* --- Footer : grille uniforme --- */
.controls {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 8px 10px max(env(safe-area-inset-bottom), 12px);
  background: linear-gradient(0deg, rgba(11,15,26,.98), rgba(11,15,26,.6));
  display: flex; flex-direction: column; gap: 6px;
}

.grid-row { display: flex; gap: 6px; }
.grid-2 > * { flex: 1; }
.grid-4 > * { flex: 1 1 25%; min-width: 0; }

/* Tous les boutons : même taille, même style */
.controls button {
  height: 44px;
  border-radius: 10px;
  border: 1px solid #2a3342;
  background: #0f1623;
  color: #c9d4e0;
  font-size: 14px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.controls button:active { transform: scale(.96); background: #1a2433; }
.controls button.on { background: #1f6feb; color: #fff; border-color: #1f6feb; }
#btn-test.on, #btn-test:active { background: #2d4a2d; border-color: #4a8a4a; color: #7fff7f; }

/* Bouton envoi circulaire */
.btn-icon {
  flex: 0 0 44px !important;
  width: 44px; height: 44px;
  border-radius: 50% !important;
  background: #1f6feb !important;
  color: #fff !important;
  border: none !important;
  font-size: 20px;
}

/* Champ texte */
#msg {
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  border: 1px solid #2a3342;
  background: #0f1623;
  color: #e6edf3;
  font-size: 16px;
  outline: none;
}
#msg:focus { border-color: #1f6feb; }

/* Sélecteurs (TX, L4) */
.sel {
  height: 44px;
  border-radius: 10px;
  border: 1px solid #2a3342;
  background: #0f1623;
  color: #c9d4e0;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 8px;
}
.sel select {
  background: transparent; color: #c9d4e0; border: none; font-size: 13px; outline: none;
  appearance: none; -webkit-appearance: none;
}

/* Panneau calibration. */
.cal-panel {
  position: fixed; bottom: 160px; left: 0; right: 0; z-index: 6;
  padding: 8px 12px; background: rgba(0,0,0,.82); border-top: 1px solid #2a3342;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
}
.cal-row { display: flex; justify-content: space-between; gap: 8px; color: #9fe0b0; margin-bottom: 4px; }
.cal-row b { color: #ffd24a; font-variant-numeric: tabular-nums; }
#cal-scope { width: 100%; height: 80px; background: #050a12; border: 1px solid #1c2330; border-radius: 4px; }
.cal-help { color: #8aa0b5; font-size: 11px; margin-top: 4px; }

/* Debug overlay. */
.lumichat-debug {
  position: fixed; top: 52px; right: 10px; z-index: 5;
  width: 200px; padding: 8px; font-size: 11px; font-family: ui-monospace, Menlo, monospace;
  background: rgba(0,0,0,.72); border: 1px solid #2a3342; border-radius: 8px;
  color: #9fe0b0;
}
.dbg-row { display: flex; justify-content: space-between; gap: 6px; }
.dbg-row span { opacity: .6; }
.dbg-log {
  margin: 6px 0 0; max-height: 120px; overflow: hidden;
  color: #8aa0b5; font-size: 10px; white-space: pre-wrap;
}