/* Jarvis: a full-bleed dark HUD inside the app shell (always dark, whatever the app theme): top bar, the graph, and a side column. */
.jarvis {
    position: absolute; inset: 0; overflow: hidden; color: #c9d1e0; padding: 10px;
    background: radial-gradient(1200px 600px at 30% 20%, #0b1426 0%, #060912 55%, #04060c 100%);
    font: 12px/1.5 var(--font-sans, system-ui, sans-serif);
    display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto minmax(0, 1fr); gap: 10px;
}
.jarvis [hidden] { display: none !important; }
.jarvis button { font: inherit; color: inherit; cursor: pointer; }
.jarvis .jv-muted { color: #6b7790; }
.jarvis .jv-cap { color: #5f6b84; font-size: 11px; }

/* top bar */
.jarvis .jv-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.jarvis .jv-search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #0a1020; border: 1px solid #18243d; border-radius: 12px; color: #6b7790; min-width: 0; }
.jarvis .jv-search:focus-within { border-color: #2e5bd6; }
.jarvis .jv-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #dfe6f3; font: 13px var(--font-sans, sans-serif); }
.jarvis kbd { font: 11px var(--font-mono, monospace); color: #6b7790; border: 1px solid #18243d; border-radius: 5px; padding: 0 6px; }
.jarvis .jv-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid #18243d; border-radius: 20px; background: #0a1020; white-space: nowrap; }
.jarvis .jv-pill i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; display: inline-block; }
.jarvis .jv-pill i.jv-blue { background: #4cb8ff; }
.jarvis .jv-pill.busy i { background: #f5b84b; }

/* graph */
.jarvis .jv-graph { position: relative; min-height: 0; border: 1px solid #18243d; border-radius: 14px; background: rgba(6,10,20,.55); overflow: hidden; }
.jarvis .jv-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jarvis .jv-bartop { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.jarvis .jv-bartop > * { pointer-events: auto; }
.jarvis .jv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jarvis .jv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: #0a1020; border: 1px solid #18243d; border-radius: 10px; color: #aeb8cc; }
.jarvis .jv-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #6b7790); }
.jarvis .jv-chip:hover { border-color: #2a3a5e; }
.jarvis .jv-chip.on { background: #12306e; border-color: #2e5bd6; color: #fff; }
.jarvis .jv-views, .jarvis .jv-tools, .jarvis .jv-zoom { display: flex; gap: 6px; }
.jarvis .jv-views button, .jarvis .jv-tools button, .jarvis .jv-zoom button { background: #0a1020; border: 1px solid #18243d; border-radius: 8px; padding: 6px 12px; color: #aeb8cc; }
.jarvis .jv-views button:hover, .jarvis .jv-tools button:hover, .jarvis .jv-zoom button:hover { border-color: #2a3a5e; color: #fff; }
.jarvis .jv-views button.on, .jarvis .jv-tools button.on { background: #12306e; border-color: #2e5bd6; color: #fff; }
.jarvis .jv-tools { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; padding: 6px; background: rgba(10,16,32,.9); border: 1px solid #18243d; border-radius: 12px; }
.jarvis .jv-tools button { border-color: transparent; background: transparent; }
.jarvis .jv-tools button.on { background: #12306e; }
.jarvis .jv-zoom { position: absolute; right: 12px; bottom: 12px; align-items: center; padding: 6px 8px; background: rgba(10,16,32,.9); border: 1px solid #18243d; border-radius: 12px; }
.jarvis .jv-zoom span { min-width: 44px; text-align: center; color: #aeb8cc; }
.jarvis .jv-zoom button { padding: 2px 10px; font-size: 16px; line-height: 1.2; border-color: transparent; background: transparent; }
.jarvis .jv-note { position: absolute; left: 50%; top: 45%; transform: translateX(-50%); color: #7d879a; text-align: center; max-width: 420px; }

.jarvis .jv-hubs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.jarvis .jv-hub { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; background: rgba(10,16,32,.92); border: 1px solid #1d2b4a; border-radius: 10px; color: #dfe6f3; white-space: nowrap; }
.jarvis .jv-hub::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.jarvis .jv-insp { position: absolute; left: 12px; top: 60px; width: 260px; max-height: 45%; overflow: auto; background: rgba(10,16,32,.94); border: 1px solid #1d2b4a; border-radius: 10px; padding: 10px 12px; }
.jarvis .jv-insp b { color: #eef2fa; font-weight: 600; font-size: 13px; }
.jarvis .jv-tag { display: inline-block; border: 1px solid #1d2b4a; border-radius: 10px; padding: 1px 8px; margin: 4px 4px 0 0; color: #9aa6c0; font-size: 11px; }
.jarvis .jv-open { display: inline-block; margin-top: 8px; color: #7ea2ff; text-decoration: none; }
.jarvis .jv-nbrs { margin-top: 6px; color: #6b7790; }
.jarvis .jv-nbrs a { color: #9fb0d0; cursor: pointer; margin-right: 8px; }
.jarvis .jv-tip { position: absolute; pointer-events: none; background: rgba(10,16,32,.96); border: 1px solid #2e5bd6; border-radius: 6px; padding: 3px 9px; color: #eef2fa; white-space: nowrap; }

.jarvis .jv-list { position: absolute; left: 12px; right: 12px; top: 56px; bottom: 12px; overflow: auto; background: rgba(8,12,24,.96); border: 1px solid #18243d; border-radius: 10px; padding: 6px; }
.jarvis .jv-row { display: grid; grid-template-columns: 18px minmax(0, 2fr) minmax(0, 3fr) 90px; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.jarvis .jv-row:hover { background: #0e1830; }
.jarvis .jv-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; }
.jarvis .jv-row .d { color: #6b7790; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* side column */
.jarvis .jv-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.jarvis .jv-card { background: rgba(8,13,26,.9); border: 1px solid #18243d; border-radius: 14px; padding: 12px 14px; }
.jarvis .jv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.jarvis .jv-head b { color: #eef2fa; font-weight: 600; font-size: 13px; }
.jarvis .jv-ok { color: #34d399; font-size: 11px; }
.jarvis .jv-ok.bad { color: #ff5c6c; }
.jarvis .jv-link { background: none; border: 0; color: #7ea2ff; padding: 0; }
.jarvis .jv-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.jarvis .jv-ring svg { width: 52px; height: 52px; display: block; margin: 0 auto 2px; }
.jarvis .jv-ring text { fill: #eef2fa; font: 600 13px var(--font-sans, sans-serif); }
.jarvis .jv-ring small { color: #7d8aa5; }
.jarvis .jv-feed .jv-frow { display: grid; grid-template-columns: 12px 1fr auto 60px; gap: 8px; align-items: center; padding: 4px 0; }
.jarvis .jv-frow i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.jarvis .jv-frow .v { font-variant-numeric: tabular-nums; }
.jarvis .jv-frow .p { text-align: right; font-variant-numeric: tabular-nums; }
.jarvis .jv-up { color: #34d399; } .jarvis .jv-dn { color: #ff5c6c; }

.jarvis .jv-chatcard { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jarvis .jv-hello { display: flex; gap: 10px; align-items: center; padding: 10px; background: #0b1530; border: 1px solid #18305f; border-radius: 10px; }
.jarvis .jv-hello canvas { width: 44px; height: 44px; flex: none; }
.jarvis .jv-hello b { color: #eef2fa; font-size: 14px; font-weight: 600; }
.jarvis .jv-sugg { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.jarvis .jv-sugg button { text-align: left; background: #0a1020; border: 1px solid #18243d; border-radius: 10px; padding: 8px 12px; color: #c9d1e0; }
.jarvis .jv-sugg button:hover { border-color: #2e5bd6; color: #fff; }
.jarvis .jv-chat { flex: 1; min-height: 0; overflow: auto; margin-top: 8px; }
.jarvis .jv-m { margin: 0 0 8px; padding: 7px 11px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; }
.jarvis .jv-m.user { background: #14264d; margin-left: 30px; color: #eef2fa; }
.jarvis .jv-m.bot { border: 1px solid #18243d; margin-right: 18px; color: #dfe6f3; }
.jarvis .jv-m.err { border: 1px solid #5a2f38; color: #f0a3ab; }
.jarvis .jv-m small { display: block; margin-top: 4px; color: #5f6b84; font: 10.5px var(--font-mono, monospace); }
.jarvis .jv-bar { display: flex; gap: 8px; margin-top: 8px; padding: 6px; background: #0a1226; border: 1px solid #1d3a7a; border-radius: 12px; }
.jarvis .jv-bar input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #eef2fa; font: 13px var(--font-sans, sans-serif); padding: 4px 8px; }
.jarvis .jv-bar button { background: #1f5eff; color: #fff; border: 0; border-radius: 8px; padding: 6px 16px; font-weight: 600; }
.jarvis .jv-bar button:disabled { opacity: .5; }

/* motion */
.jarvis .jv-sweep { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, rgba(76,184,255,0) 0deg, rgba(76,184,255,0) 310deg, rgba(76,184,255,.10) 360deg); }
.jarvis .jv-ring circle.v { transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1); }
.jarvis .jv-feed .jv-frow { padding: 4px 4px; border-radius: 6px; }
.jarvis .jv-slide { animation: jv-slide .45s ease-out; }
.jarvis .jv-fu { animation: jv-fu 1s ease-out; }
.jarvis .jv-fd { animation: jv-fd 1s ease-out; }
.jarvis .jv-m { animation: jv-in .28s ease-out; }
.jarvis .jv-m.wait::after { content: ""; animation: jv-dots 1.2s steps(1) infinite; }
.jarvis .jv-m.typing::after { content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 2px; vertical-align: -2px; background: #4cb8ff; animation: jv-blink 1s steps(1) infinite; }
.jarvis .jv-pill.busy i { animation: jv-beat .9s ease-in-out infinite; }
.jarvis .jv-pill.talk i { background: #4cb8ff; animation: jv-beat .5s ease-in-out infinite; }
@keyframes jv-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes jv-fu { 0% { background: rgba(52,211,153,.35); } 100% { background: transparent; } }
@keyframes jv-fd { 0% { background: rgba(255,92,108,.35); } 100% { background: transparent; } }
@keyframes jv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes jv-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@keyframes jv-blink { 50% { opacity: 0; } }
@keyframes jv-beat { 50% { transform: scale(1.5); } }
:root[data-fx="off"] .jarvis *, :root[data-fx="off"] .jarvis *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .jarvis *, .jarvis *::after { animation: none !important; transition: none !important; } }

@media (max-width: 1000px) {
    .jarvis { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); overflow: auto; }
    .jarvis .jv-side { flex-direction: column; }
    .jarvis .jv-tools { display: none; }
}