/* J.A.R.V.I.S. shared HUD design system: tokens, holo frames, reactor, cards, animated weather icons, map. */
:root {
  --bg: #02060c;
  --bg2: #061424;
  --panel: rgba(6, 22, 38, 0.72);
  --line: rgba(90, 210, 255, 0.16);
  --line-strong: rgba(90, 210, 255, 0.38);
  --text: #d3f1ff;
  --muted: #5b88a3;
  --glow: #33d6ff;
  --glow-soft: #a6f0ff;
  --amber: #ffb547;
  --red: #ff4d5e;
  --green: #3dffb4;
  --violet: #b48cff;
  --lvl: 0;
  --spin: 1;
  --font-hud: 'Orbitron', 'Segoe UI', sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', sans-serif;
  --font-mono: 'Share Tech Mono', Consolas, monospace;
}
body[data-mode="listening"] { --glow: #7ff4ff; --glow-soft: #e8fdff; --spin: 1.8; }
body[data-mode="followup"]  { --glow: #3dffcf; --glow-soft: #c9fff1; --spin: 1.4; }
body[data-mode="thinking"]  { --glow: #ffb547; --glow-soft: #ffe2b0; --spin: 4.5; }
body[data-mode="speaking"]  { --glow: #33d6ff; --glow-soft: #c8f7ff; --spin: 1.5; }
body[data-mode="offline"]   { --glow: #ff4d5e; --glow-soft: #ffc2c8; --spin: 0.3; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes breathe { 0%, 100% { transform: scale(.9); opacity: .8; } 50% { transform: scale(1.03); opacity: 1; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 3% { opacity: .4; } 6% { opacity: 1; } 42% { opacity: 1; } 43% { opacity: .6; } 44% { opacity: 1; } }

/* ------------------------------------------------------------------ backdrop */
.fx-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fx-scan { position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); opacity: .3; }
.fx-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 120px; top: -120px;
  background: linear-gradient(180deg, transparent, rgba(110, 230, 255, .05), transparent);
  animation: sweep-down 7s linear infinite; }
@keyframes sweep-down { to { top: 100%; } }
.fx-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%); }

/* ------------------------------------------------------------------ holo frame (panels, cards) */
.holo { position: relative; background: linear-gradient(180deg, rgba(8, 28, 46, .78), rgba(3, 12, 22, .78));
  border: 1px solid var(--line); box-shadow: inset 0 0 30px rgba(51, 214, 255, .05), 0 0 24px rgba(0, 0, 0, .35);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.holo > .corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--glow); opacity: .85;
  transition: border-color .4s; pointer-events: none; }
.holo > .corner.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.holo > .corner.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.holo > .corner.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.holo > .corner.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.holo-title { display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px 20px;
  font-family: var(--font-hud); font-size: 11px; letter-spacing: .32em; color: var(--muted);
  border-bottom: 1px solid var(--line); }
.holo-title::before { content: ''; width: 6px; height: 6px; background: var(--glow); box-shadow: 0 0 8px var(--glow);
  animation: blink 1.6s infinite; }
.holo-title .r { margin-left: auto; font-family: var(--font-mono); letter-spacing: .08em; font-size: 11px; }

/* ------------------------------------------------------------------ reactor */
.rx { position: relative; aspect-ratio: 1; }
.rx-halo { position: absolute; inset: -16%; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
  opacity: calc(.12 + var(--lvl) * .55); filter: blur(22px); transition: background .4s; }
.rx-sweep { position: absolute; inset: 7%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 290deg, color-mix(in srgb, var(--glow) 40%, transparent) 356deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57% 69%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 56%, #000 57% 69%, transparent 70%);
  opacity: .6; }
.rx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rx-defs { position: absolute; width: 0; height: 0; }
.rx-l { transform-origin: 50% 50%; will-change: transform; } /* each ring is its own layer: rotating it is free */
.rx-svg .ln { fill: none; stroke: var(--glow); transition: stroke .4s; }
.rx-svg .txt { fill: var(--glow); font-family: var(--font-mono); font-size: 10px; opacity: .7; text-anchor: middle; }
.rx-svg .tk { stroke: var(--glow); stroke-width: 1.2; opacity: .45; }
.rx-svg .tk.l { opacity: .9; stroke-width: 2; }
.rx-c1 { stroke-width: 2.2; stroke-dasharray: 64 10 6 10; opacity: .55; }
.rx-spec line { stroke: var(--glow); stroke-width: 2.4; stroke-linecap: round; opacity: .85; transition: stroke .4s; }
.rx-a1 { stroke-width: 7; stroke-dasharray: 190 95; opacity: .85; }
.rx-a2 { stroke-width: 2; stroke-dasharray: 2 7; opacity: .7; }
.rx-a3 { stroke-width: 1; opacity: .35; }
.rx-coils rect { fill: color-mix(in srgb, var(--glow) 14%, transparent); stroke: var(--glow); stroke-width: 1.6; opacity: .75;
  transition: stroke .4s; }
.rx-i1 { stroke-width: 7; opacity: .9; }
.rx-i2 { stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .8; }
.rx-tri { stroke-width: 3; opacity: .9; }
.rx-sweep { will-change: transform; } /* rings and sweep are turned by JarvisFX.reactor().tick() */

/* ------------------------------------------------------------------ cards */
.jc-stage { display: flex; flex-direction: column; gap: 12px; }
.jc-card { position: relative; overflow: hidden; color: var(--text); --cg: #33d6ff;
  animation: jc-open .55s cubic-bezier(.2, .8, .2, 1) both; }
.jc-card.out { animation: jc-close .32s ease-in forwards; }
.jc-card { max-height: 640px; transition: max-height .5s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.jc-card.mini { max-height: 62px; opacity: .8; }
.jc-card.mini .jc-sweep { display: none; }
@keyframes jc-open {
  0% { clip-path: inset(50% 0 50% 0); opacity: 0; filter: brightness(2.2); }
  12% { clip-path: inset(49.5% 0 49.5% 0); opacity: 1; }
  45% { clip-path: inset(49.5% 0 49.5% 0); }
  100% { clip-path: inset(0 0 0 0); filter: brightness(1); }
}
@keyframes jc-close { to { clip-path: inset(50% 0 50% 0); opacity: 0; } }
.jc-card .jc-sweep { position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, transparent 0, rgba(140, 240, 255, .18) 48%, rgba(220, 255, 255, .45) 50%, transparent 52%);
  background-size: 100% 220%; background-repeat: no-repeat; animation: jc-sweep 1.1s .25s ease-out both; }
@keyframes jc-sweep { from { background-position: 0 100%; } to { background-position: 0 -120%; } }
.jc-card .in { animation: jc-rise .5s ease-out both; animation-delay: calc(.45s + var(--i, 0) * 75ms); }
@keyframes jc-rise { from { opacity: 0; transform: translateY(7px); filter: blur(3px); } }
.jc-head { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 10px; padding: 10px 14px 6px 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.jc-head .tag { color: var(--cg); letter-spacing: .28em; }
.jc-head .tag::before { content: '◢ '; }
.jc-head .r { margin-left: auto; letter-spacing: .1em; }
.jc-place { position: relative; z-index: 2; padding: 0 14px 0 20px; font-family: var(--font-hud); font-size: 19px;
  letter-spacing: .14em; color: var(--glow-soft); text-shadow: 0 0 12px rgba(51, 214, 255, .5); text-transform: uppercase; }
.jc-sub { position: relative; z-index: 2; padding: 2px 14px 0 20px; font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.jc-foot { position: relative; z-index: 2; padding: 6px 14px 9px 20px; font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(91, 136, 163, .8); letter-spacing: .08em; display: flex; justify-content: space-between; gap: 8px; }

/* weather card */
.jc-weather .jc-bgmap { position: absolute; inset: 0; opacity: .22; z-index: 0;
  -webkit-mask: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
  mask: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); }
.wx-main { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px;
  padding: 8px 16px 4px 20px; }
.wx-temp { font-family: var(--font-hud); font-weight: 700; font-size: 54px; line-height: 1; color: #fff;
  text-shadow: 0 0 18px var(--cg), 0 0 40px color-mix(in srgb, var(--cg) 40%, transparent); }
.wx-temp sup { font-size: 20px; color: var(--glow-soft); margin-left: 2px; vertical-align: 22px; }
.wx-desc { grid-column: 2; font-family: var(--font-body); font-size: 16px; color: var(--text); text-transform: capitalize; }
.wx-desc b { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; }
.wx-gauges { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 14px 6px 20px; }
.gauge { display: flex; align-items: center; gap: 8px; }
.gauge svg { width: 44px; height: 44px; flex: none; overflow: visible; }
.gauge .track { fill: none; stroke: rgba(90, 210, 255, .14); stroke-width: 4; }
.gauge .val { fill: none; stroke: var(--cg); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 22px 22px;
  stroke-dasharray: 113; stroke-dashoffset: 113; transition: stroke-dashoffset 1.3s cubic-bezier(.2, .8, .2, 1) .6s;
  filter: drop-shadow(0 0 4px var(--cg)); }
.gauge .needle { transform-origin: 22px 22px; transition: transform 1.6s cubic-bezier(.3, 1.6, .5, 1) .6s; }
.gauge .needle path { fill: var(--cg); filter: drop-shadow(0 0 4px var(--cg)); }
.gauge .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--muted); }
.gauge .v { font-family: var(--font-hud); font-size: 14px; color: var(--glow-soft); }
.wx-days { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 14px 4px 20px; }
.wx-day { border: 1px solid var(--line); background: rgba(4, 16, 28, .65); padding: 6px 6px 7px; text-align: center; }
.wx-day .d { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--muted); }
.wx-day .wi { width: 34px; height: 34px; margin: 2px auto; display: block; }
.wx-day .t { font-family: var(--font-hud); font-size: 12px; color: var(--glow-soft); }
.wx-day .t span { color: var(--muted); }
.wx-day .bar { height: 3px; margin-top: 5px; background: rgba(90, 210, 255, .12); position: relative; }
.wx-day .bar i { position: absolute; top: 0; bottom: 0; left: var(--from); width: 0; background: linear-gradient(90deg, #4fb6ff, #ffb547);
  box-shadow: 0 0 6px rgba(255, 181, 71, .5); transition: width 1s cubic-bezier(.2, .8, .2, 1) .9s; }
.wx-day .rain { font-family: var(--font-mono); font-size: 9.5px; color: #6fc6ff; margin-top: 3px; }

/* animated weather icons (SVG 64x64) */
.wi { width: 84px; height: 84px; overflow: visible; }
.wi .sun-core { fill: #ffd27a; filter: drop-shadow(0 0 6px #ffb547); animation: wi-pulse 3s ease-in-out infinite; transform-origin: 32px 32px; }
.wi .sun-rays { stroke: #ffc861; stroke-width: 3; stroke-linecap: round; transform-origin: 32px 32px; animation: spin 14s linear infinite; }
.wi .moon { fill: #cfe6ff; filter: drop-shadow(0 0 6px #8fc4ff); }
.wi .star { fill: #e8f6ff; animation: wi-twinkle 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.wi .cloud { fill: #9fb8cc; stroke: #d9ecf8; stroke-width: 1.2; animation: wi-drift 5.5s ease-in-out infinite alternate; }
.wi .cloud.dark { fill: #5d7487; stroke: #9fb8cc; }
.wi .cloud.back { fill: #6f8aa0; opacity: .8; animation-duration: 7s; animation-direction: alternate-reverse; }
.wi .drop { stroke: #5ec8ff; stroke-width: 2.2; stroke-linecap: round; animation: wi-fall 1s linear infinite; }
.wi .flake { fill: #f2fbff; animation: wi-snow 2.6s linear infinite; }
.wi .bolt { fill: #ffe066; filter: drop-shadow(0 0 6px #ffd23f); animation: wi-flash 2.8s steps(1) infinite; }
.wi .fog { stroke: #a9c4d8; stroke-width: 3; stroke-linecap: round; animation: wi-fog 3.5s ease-in-out infinite alternate; }
@keyframes wi-pulse { 50% { transform: scale(1.08); } }
@keyframes wi-twinkle { 50% { opacity: .2; transform: scale(.6); } }
@keyframes wi-drift { from { transform: translateX(-2.5px); } to { transform: translateX(2.5px); } }
@keyframes wi-fall { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes wi-snow { 0% { transform: translate(0, -4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(3px, 15px); opacity: 0; } }
@keyframes wi-flash { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 11% { opacity: 0; } 14% { opacity: 1; } 22% { opacity: 0; } }
@keyframes wi-fog { from { transform: translateX(-4px); } to { transform: translateX(4px); } }

/* location card + map */
.jc-map { position: relative; z-index: 2; height: 200px; margin: 8px 14px 0 20px; overflow: hidden; background: #01050a;
  border: 1px solid var(--line-strong); }
.jc-layer { position: absolute; left: 50%; top: 50%; width: 0; height: 0; will-change: transform, opacity; }
.jc-layer img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; }
.jc-layer img.sat { filter: grayscale(1) sepia(1) hue-rotate(158deg) saturate(2.6) brightness(.82) contrast(1.3); }
.jc-layer img.lbl { filter: brightness(2.2) sepia(1) hue-rotate(150deg) saturate(3); opacity: .95; }
.jc-map .grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(90, 210, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 210, 255, .08) 1px, transparent 1px);
  background-size: 24px 24px; }
.jc-map .tint { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(1, 6, 12, .75) 100%); }
.jc-map .reticle { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; overflow: visible; }
.jc-map .reticle .r1 { fill: none; stroke: var(--cg); stroke-width: 1.2; stroke-dasharray: 14 8; transform-origin: 60px 60px; animation: spin 9s linear infinite; }
.jc-map .reticle .r2 { fill: none; stroke: var(--cg); stroke-width: 2; opacity: .9; }
.jc-map .reticle .ch { stroke: var(--cg); stroke-width: 1.4; }
.jc-map .reticle .dot { fill: #fff; filter: drop-shadow(0 0 6px var(--cg)); }
.jc-map .reticle .lock { transform-origin: 60px 60px; animation: jc-lock .7s cubic-bezier(.2, .8, .2, 1) 1.5s both; }
@keyframes jc-lock { from { transform: scale(2.6) rotate(45deg); opacity: 0; } 70% { opacity: 1; } to { transform: scale(1) rotate(0); opacity: 1; } }
.jc-map .ping { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid var(--cg); animation: jc-ping 2s ease-out 1.6s infinite; opacity: 0; }
@keyframes jc-ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
.jc-map .lockt { position: absolute; left: calc(50% + 34px); top: calc(50% - 44px); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .18em; color: var(--cg); background: rgba(1, 8, 14, .7); border: 1px solid var(--cg); padding: 1px 5px;
  animation: jc-rise .4s ease-out 1.9s both, blink 1.2s 2.4s 3; }
.jc-map .zoomt { position: absolute; left: 8px; bottom: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--glow-soft);
  letter-spacing: .1em; text-shadow: 0 0 6px #000; }
.jc-read { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; padding: 9px 14px 2px 20px; }
.jc-read div { border-left: 2px solid var(--line-strong); padding-left: 7px; }
.jc-read .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.jc-read .v { font-family: var(--font-hud); font-size: 13px; color: var(--glow-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* window out of sight: freeze every animation (see JarvisFX.setSleep) */
body.asleep *, body.asleep *::before, body.asleep *::after { animation-play-state: paused !important; }
body.asleep .fx-bg { visibility: hidden; }
.rx-halo { will-change: opacity; }