/* styles.css — HUD for the live 3D (Milestone 7). Palette matches super-agent-network-3d.html. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: #0a1a2e; color: #dce6f0; }
#bg { position: fixed; inset: 0; background: radial-gradient(circle at 50% 38%, #15324f 0%, #0b1d33 45%, #070f1c 100%); z-index: 0; }
canvas { position: fixed; inset: 0; z-index: 1; display: block; }

#overlay { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#overlay .panel, #overlay .bar, #overlay button, #overlay input, #overlay textarea, #overlay a, #overlay .modal { pointer-events: auto; }

.title { position: absolute; top: 22px; left: 0; right: 0; text-align: center; }
.title .k { font-size: 12px; letter-spacing: .28em; color: #c9a24b; font-weight: 700; text-transform: uppercase; }
.title h1 { font-family: Georgia, serif; font-size: 26px; margin: 7px 0 0; }
.title p { margin: 5px 0 0; color: #9fb1c4; font-size: 13px; }
.brand { position: absolute; right: 22px; top: 26px; color: #7e92a8; font-size: 12px; }
.hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: #6c7e93; font-size: 11px; }

.panel { position: absolute; background: rgba(8, 20, 34, .62); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px; padding: 12px 14px; backdrop-filter: blur(6px); width: 290px; }
.panel.tl { top: 92px; left: 22px; }
.panel.bl { left: 22px; bottom: 56px; width: 230px; }
.panel.tr { top: 92px; right: 22px; }
.panel.br { right: 22px; bottom: 56px; width: 300px; }

label { display: block; margin: 8px 0 3px; color: #9aa6c7; font-size: 12px; }
label.inline { display: inline; margin: 0 0 0 6px; }
input, textarea { width: 100%; background: #0e1a30; color: #dce6f0; border: 1px solid #26344f; border-radius: 6px; padding: 7px; font: inherit; font-size: 13px; }
textarea { min-height: 78px; resize: vertical; }
.row { display: flex; align-items: center; margin: 8px 0 0; }
.row input[type=checkbox] { width: auto; }

button { cursor: pointer; font: inherit; font-size: 13px; border-radius: 7px; border: 1px solid #2b4bb0; background: #1c3a86; color: #eaf0ff; padding: 8px 12px; }
button:hover { filter: brightness(1.12); }
button.primary { width: 100%; margin-top: 12px; background: #c9a24b; border-color: #d9b765; color: #16223a; font-weight: 700; }
button.approve { background: #14532d; border-color: #1f6e3f; }
button.reject { background: #5a1d1d; border-color: #7a2a2a; }
button.x { position: absolute; top: 8px; right: 10px; background: transparent; border: none; color: #8aa; font-size: 18px; padding: 0; }
.status { margin-top: 10px; font-size: 12px; color: #6c7e93; }

#legend .lrow { display: flex; align-items: center; gap: 9px; margin: 6px 0; font-size: 13px; }
#legend .dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex: none; }
#legend .nm { flex: 1; }
#legend .badge { font-size: 10px; color: #16223a; background: #6c7e93; border-radius: 999px; padding: 1px 7px; }
#legend .badge.glm { background: #4aa3e0; } #legend .badge.claude { background: #c9a24b; } #legend .badge.mock { background: #6c7e93; }
#legend .st { font-size: 10px; color: #7e92a8; }
#legend .st.running { color: #fff; } #legend .st.done { color: #37b87f; } #legend .st.error { color: #f38ba8; }

#drill { max-width: 320px; }
#drill h3 { margin: 0 28px 6px 0; font-size: 15px; }
#drill .chip { display: inline-block; font-size: 10px; border: 1px solid #2b4bb0; border-radius: 999px; padding: 1px 8px; color: #9fb1c4; margin-bottom: 8px; }
#drill pre { white-space: pre-wrap; word-break: break-word; font: 12px/1.5 ui-monospace, Menlo, monospace; color: #cdd8e4; margin: 0; max-height: 50vh; overflow: auto; }

.bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 70px; display: flex; align-items: center; gap: 12px;
  background: rgba(201, 162, 75, .14); border: 1px solid #c9a24b; border-radius: 12px; padding: 10px 16px; box-shadow: 0 0 24px rgba(201,162,75,.25); }
.bar #approvalText { color: #f9e2af; font-weight: 600; }
.escalation { color: #f38ba8; font-size: 12px; }

#logPanel .logHead { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #7e92a8; margin-bottom: 6px; }
#log { font: 11px/1.5 ui-monospace, Menlo, monospace; max-height: 30vh; overflow: auto; }
#log .e { padding: 2px 6px; border-left: 3px solid #26344f; margin: 2px 0; color: #aebfd2; }
#log .e.error { border-color: #f38ba8; color: #f5b7c4; } #log .e.done { border-color: #37b87f; }
#log .e.approval\:required { border-color: #f9e2af; color: #f9e2af; }

.footer { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; color: #6c7e93; font-size: 11px; }
.compare { position: absolute; left: 22px; top: 92px; display: none; } /* moved into legend area on small screens; kept simple */
.compare { position: absolute; right: 22px; bottom: 230px; background: transparent; border: 1px solid #2b4bb0; color: #9fb1c4; }

.modal { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(4, 10, 20, .7); }
.modalCard { position: relative; max-width: 460px; background: #0e1a30; border: 1px solid #26344f; border-radius: 14px; padding: 24px; }
.modalCard h3 { margin: 0 24px 10px 0; }
.modalCard p { color: #aebfd2; font-size: 14px; line-height: 1.55; }
.modalCard a.primary { display: inline-block; width: auto; text-decoration: none; margin-top: 8px; }
.muted { color: #6c7e93; }

#fallback { position: fixed; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; }