/* Hearth & Hue back office - the Lobby command stage (the Orb and its instruments) */
.jv{--jv:var(--h-brass-rgb);position:relative;height:clamp(400px,64vh,580px);margin:0 0 12px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(var(--jv),.3);
  background:radial-gradient(ellipse 60% 60% at 50% 44%,rgba(var(--jv),.09),transparent 70%),linear-gradient(180deg,#07080b,#0b0c10);
  box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 18px 50px rgba(0,0,0,.45);transition:border-color .4s cubic-bezier(.32,.72,0,1),box-shadow .4s cubic-bezier(.32,.72,0,1)}
.jv.compact{height:clamp(280px,40vh,340px)}
.jv::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(var(--jv),.05) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(var(--jv),.05) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 20%,transparent 80%)}
.jv::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(180deg,transparent 0,rgba(var(--jv),.07) 50%,transparent 100%) 0 -30%/100% 22% no-repeat;
  animation:jv-scan 7s linear infinite}
@keyframes jv-scan{to{background-position:0 130%,0 130%}}
.jv[data-state=listening]{border-color:rgba(var(--jv),.75);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 0 38px rgba(var(--jv),.22),0 18px 50px rgba(0,0,0,.45)}
.jv[data-state=speaking]{border-color:rgba(var(--jv),.55);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 0 26px rgba(var(--jv),.16),0 18px 50px rgba(0,0,0,.45)}
.jv-cv{position:absolute;left:0;top:0;width:100%;height:calc(100% - 120px);display:block;z-index:1}
.jv.compact .jv-cv{height:calc(100% - 92px)}
/* corner brackets and readouts */
.jv-br{position:absolute;width:16px;height:16px;z-index:4;pointer-events:none;border:0 solid rgba(var(--jv),.8)}
.jv-br.tl{left:8px;top:8px;border-width:1px 0 0 1px}.jv-br.tr{right:8px;top:8px;border-width:1px 1px 0 0}
.jv-br.bl{left:8px;bottom:8px;border-width:0 0 1px 1px}.jv-br.brr{right:8px;bottom:8px;border-width:0 1px 1px 0}
.jv-t{position:absolute;z-index:4;pointer-events:none;display:flex;flex-direction:column;gap:3px;font:10px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--h-faint,#6C7078)}
.jv-t em{font-style:normal;opacity:.8}
.jv-t b{font:600 17px/1.1 var(--mono);letter-spacing:.12em;color:var(--brass-bright,#D3A667);text-shadow:0 0 14px rgba(var(--jv),.6)}
.jv-t span{letter-spacing:.14em;opacity:.8;font-size:9.5px}
.jv-t.tl{left:22px;top:20px}.jv-t.tr{right:22px;top:20px;text-align:right;align-items:flex-end}
.jv-t.bl{left:22px;bottom:64px}.jv-t.br{right:22px;bottom:64px;text-align:right;align-items:flex-end}
.jv.compact .jv-t.bl,.jv.compact .jv-t.br{display:none}
/* the orb's touch target */
.jv .jv-hit{position:absolute;z-index:5;left:50%;top:calc((100% - 120px) / 2);width:clamp(120px,32%,250px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.jv.compact .jv-hit{top:calc((100% - 92px) / 2);width:clamp(90px,24%,150px)}
.jv-hit:focus-visible{outline:2px solid var(--brass-bright,#E6B873);outline-offset:4px}
.jv-hit::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(var(--jv),0);transition:border-color .3s}
.jv-hit:hover::after{border-color:rgba(var(--jv),.4)}
.jv[data-state=listening] .jv-hit::after{border-color:rgba(var(--jv),.8);animation:jv-ping 1.5s ease-out infinite}
@keyframes jv-ping{from{transform:scale(.92);opacity:1}to{transform:scale(1.35);opacity:0}}
/* the line of speech */
.jv-say{position:absolute;z-index:4;left:50%;bottom:84px;transform:translateX(-50%);width:min(660px,88%);min-height:42px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;text-align:center;pointer-events:none}
.jv-say .you{font:11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--h-faint,#8a8f98)}
.jv-say .you::before{content:'\203A  ';color:var(--brass-bright,#D3A667)}
.jv-say .bot{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:14px;line-height:1.45;color:var(--ink,#F1EDE6);text-shadow:0 0 18px rgba(0,0,0,.9)}
.jv-say .idle{font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--h-faint,#6C7078)}
/* business nodes along the bottom edge */
.jv-sats{position:absolute;z-index:5;left:12px;right:12px;bottom:12px;display:flex;gap:8px;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.jv-sats::-webkit-scrollbar{display:none}
:root .jv .jv-sat{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:34px;height:34px;padding:0 12px;border-radius:0;border:1px solid rgba(var(--jv),.32);background:rgba(0,0,0,.4);color:var(--h-faint,#9a9fa8);font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s cubic-bezier(.32,.72,0,1),background .2s cubic-bezier(.32,.72,0,1),color .2s}
:root .jv .jv-sat i{width:6px;height:6px;border-radius:50%;background:rgba(var(--jv),.55);box-shadow:0 0 8px rgba(var(--jv),.7)}
:root .jv .jv-sat b{font:700 11px var(--mono);color:var(--brass-bright,#D3A667)}
:root .jv .jv-sat:hover{border-color:rgba(var(--jv),.7);color:var(--ink,#F1EDE6);background:rgba(var(--jv),.12)}
:root .jv .jv-sat.on{border-color:var(--brass-bright,#D3A667);background:rgba(var(--jv),.2);color:var(--brass-bright,#E6C58F)}
:root .jv .jv-sat.on i{background:var(--brass-bright,#D3A667)}
:root .jv .jv-sat:active{transform:scale(.96)}
/* controls under the stage */
.jv-ctl{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 14px}
.jv-modes{display:flex;flex-wrap:wrap;gap:6px}
:root .jv-ctl .jv-chip{min-height:30px;height:30px;padding:0 12px;border-radius:0;border:1px solid rgba(var(--h-brass-rgb),.32);background:rgba(var(--h-brass-rgb),.05);color:var(--h-faint,#9a9fa8);font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s cubic-bezier(.32,.72,0,1),background .2s,color .2s}
:root .jv-ctl .jv-chip:hover{border-color:rgba(var(--h-brass-rgb),.75);color:var(--ink,#F1EDE6);background:rgba(var(--h-brass-rgb),.14)}
:root .jv-ctl .jv-chip.on{border-color:var(--brass-bright,#D3A667);color:var(--brass-bright,#E6C58F);background:rgba(var(--h-brass-rgb),.2)}
:root .jv-ctl .jv-chip.mic{color:var(--brass-bright,#E6C58F);border-color:var(--brass-bright,#D3A667)}
:root .jv-ctl .jv-chip.mic.live{background:var(--brass-bright,#D3A667);color:var(--h-on,#14161B)}
:root .jv-ctl .jv-chip.off{opacity:.65}
.jv-pals{display:flex;gap:8px;align-items:center}
:root .jv-ctl .jv-dot{width:20px;height:20px;min-height:0;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.3);transition:transform .2s cubic-bezier(.32,.72,0,1),box-shadow .2s}
:root .jv-ctl .jv-dot:hover{transform:scale(1.15)}
:root .jv-ctl .jv-dot.on{box-shadow:0 0 0 2px #0b0c10,0 0 0 3px var(--brass-bright,#D3A667)}
.jv-form{display:flex;flex:1 1 360px;gap:8px;align-items:center;min-width:0}
.jv-form input{flex:1 1 auto;min-width:0;height:30px;padding:0 12px;font:12px var(--mono);letter-spacing:.04em}
.jv .jv-hit::before,.jv-ctl button::before,.jv .jv-sat::before{content:none!important}
.lb-bar{align-items:center;margin-bottom:6px}.lb-bar .subtabs{margin:0}
@media (max-width:640px){
  .jv{height:clamp(380px,60vh,470px)}
  .jv.compact{height:300px}
  .jv-t.bl,.jv-t.br{display:none}
  .jv-t b{font-size:14px}.jv-t.tl{left:16px;top:16px}.jv-t.tr{right:16px;top:16px}
  .jv{height:clamp(440px,66vh,520px)}
  .jv-cv{height:calc(100% - 168px)}.jv .jv-hit{top:calc((100% - 168px) / 2)}
  .jv-say{bottom:112px}.jv-say .bot{font-size:13px;-webkit-line-clamp:3}
  .jv-planets{display:grid;grid-template-columns:1fr 1fr;gap:4px;bottom:52px;left:16px;right:16px}
  .jv-sats{justify-content:flex-start}
  .jv-modes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}.jv-modes::-webkit-scrollbar{display:none}
  .jv-modes .jv-chip{flex:0 0 auto}
  .jv-form{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.jv::after{animation:none}.jv[data-state=listening] .jv-hit::after{animation:none}}

/* Procyon's planets: each agent as Name over Job */
.jv-planets{position:absolute;z-index:5;left:12px;right:12px;bottom:54px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;pointer-events:none}
.jv .jv-pl{display:inline-flex;align-items:baseline;gap:6px;padding:3px 8px;border-left:2px solid rgba(var(--jv),.4);background:rgba(0,0,0,.28);font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#F1EDE6)}
.jv .jv-pl i{align-self:center;width:5px;height:5px;border-radius:50%;background:rgba(var(--jv),.5);box-shadow:0 0 6px rgba(var(--jv),.6)}
.jv .jv-pl small{font:500 9px var(--mono);letter-spacing:.14em;color:var(--h-faint,#9a9fa8)}
.jv .jv-pl b{font:700 10px var(--mono);color:var(--brass-bright,#D3A667)}
.jv .jv-pl.has{border-left-color:var(--brass-bright,#D3A667)}
@media (max-width:640px){.jv .jv-pl{padding:2px 6px;font-size:9px;letter-spacing:.08em}.jv .jv-pl small{font-size:8px}}
.jv.compact .jv-planets{display:none}

/* Comms panel: the transcript docks to the right of the orb as a small tactical readout (desktop). Phones keep it under the orb, smaller. */
@keyframes jv-blink{0%,49%{opacity:1}50%,100%{opacity:.25}}
@keyframes jv-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.jv-say .you{font-size:10px}
.jv-say .bot{font-size:12px}
@media (min-width:641px){
.jv:not(.compact) .jv-say{left:auto;right:22px;bottom:auto;top:47%;transform:translateY(-50%);width:clamp(210px,26%,290px);min-height:0;max-height:50%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(var(--jv),.4) transparent;pointer-events:auto;box-sizing:border-box;align-items:stretch;justify-content:flex-start;text-align:left;gap:7px;padding:28px 14px 12px 14px;border-left:2px solid rgba(var(--jv),.75);background:linear-gradient(rgba(var(--jv),.3),rgba(var(--jv),.3)) 14px 23px/calc(100% - 28px) 1px no-repeat,repeating-linear-gradient(0deg,rgba(var(--jv),.05) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(var(--jv),.13),rgba(0,0,0,.45) 45%,rgba(0,0,0,.22));clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
.jv:not(.compact) .jv-say::before{content:'COMMS // PROCYON';position:absolute;left:14px;top:9px;font:600 8.5px var(--mono);letter-spacing:.26em;color:rgba(var(--jv),.95)}
.jv:not(.compact) .jv-say::after{content:'';position:absolute;right:18px;top:10px;width:5px;height:5px;background:rgb(var(--jv));box-shadow:0 0 8px rgba(var(--jv),.9);animation:jv-blink 1.6s steps(1) infinite}
.jv:not(.compact) .jv-say .you{font:10px/1.45 var(--mono);letter-spacing:.04em;color:var(--h-faint,#8a8f98)}
.jv:not(.compact) .jv-say .you::before,.jv:not(.compact) .jv-say .bot::before,.jv:not(.compact) .jv-say .lb-time::before{display:block;margin-bottom:2px;font:600 8px var(--mono);letter-spacing:.26em;color:rgba(var(--jv),.8)}
.jv:not(.compact) .jv-say .you::before{content:'INPUT'}
.jv:not(.compact) .jv-say .bot{display:block;overflow:visible;font-size:11.5px;line-height:1.5;text-shadow:none;animation:jv-in .35s ease-out}
.jv:not(.compact) .jv-say .bot::before{content:'PROCYON'}
.jv:not(.compact) .jv-say .lb-time{margin-top:0;font:9px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75;color:var(--h-faint,#8a8f98)}
.jv:not(.compact) .jv-say .lb-time::before{content:'STATUS'}
.jv:not(.compact) .jv-say .idle{font:9px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--h-faint,#6C7078)}
}
@media (prefers-reduced-motion:reduce){.jv-say::after,.jv-say .bot{animation:none!important}}

/* Voice & personality: a small enclosed settings box under the controls */
.jv-set{flex:1 1 100%;border:1px solid rgba(var(--h-brass-rgb),.28);background:rgba(var(--h-brass-rgb),.04)}
.jv-set[hidden]{display:none}
.jv-set summary{cursor:pointer;list-style:none;padding:8px 12px;font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--h-faint,#9a9fa8)}
.jv-set summary::-webkit-details-marker{display:none}
.jv-set summary::before{content:'+  ';color:var(--brass-bright,#D3A667)}
.jv-set[open] summary::before{content:'\2013  '}
.jv-set summary:hover{color:var(--ink,#F1EDE6)}
.jv-setbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 16px;padding:2px 12px 12px}
.jv-setbody label{display:flex;flex-direction:column;gap:4px;font:600 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--h-faint,#9a9fa8)}
.jv-setbody .wide{grid-column:1/-1}
.jv-setbody select,.jv-setbody textarea{width:100%;box-sizing:border-box;font:12px var(--mono);letter-spacing:.02em;text-transform:none}
.jv-setbody textarea{resize:vertical;min-height:44px}
.jv-setbody input[type=range]{width:100%;padding:0;accent-color:rgb(var(--h-brass-rgb))}
.jv-setbtn{display:flex;gap:8px}
.jv-merst{font:500 11px var(--mono);letter-spacing:.04em;color:var(--h-faint,#9a9fa8);text-transform:none;align-self:center}
.jv-setbtn .jv-merst{margin-left:10px}