/* ============================================================
   J.A.R.V.I.S — faithful recreation of the live UI screenshot.
   Centered neural orb, top-left tools, top-right clock, caption,
   file drop zone, response line, bottom command bar, cam preview.
   ============================================================ */

:root {
  --pri: #19d4ff;
  --pri-dim: #0a5f77;
  --text: #bdeaff;
  --bg: #060a10;
  --amber: #f59e0b;
  --red: #ff3355;
  --glow: rgba(25, 212, 255, 0.30);
  --hair: rgba(25, 212, 255, 0.18);
  --mono: "JetBrains Mono", Consolas, Monaco, monospace;
  --display: "Sora", "Century Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: transparent; color: var(--text);
  font-family: var(--display); -webkit-font-smoothing: antialiased; user-select: none; }
.ico { display: inline-flex; align-items: center; justify-content: center; }
.ico svg { width: 20px; height: 20px; display: block; }

.hud {
  position: relative; height: 100vh; width: 100vw; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 16px;
  background:
    radial-gradient(58% 52% at 50% 40%, color-mix(in srgb, var(--pri) 9%, transparent), transparent 72%),
    radial-gradient(130% 120% at 50% 45%, #0c0d11 0%, #070709 55%, #030304 100%);
}

/* ===== Top-left tools ===== */
.tools { position: absolute; top: 18px; left: 20px; display: flex; gap: 12px; z-index: 40; -webkit-app-region: no-drag; }
.tool { width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(10, 22, 34, 0.6); border: 1px solid var(--hair);
  color: color-mix(in srgb, var(--text) 75%, transparent); display: grid; place-items: center;
  transition: background .16s, border-color .16s, color .16s, transform .1s; }
.tool .ico svg { width: 18px; height: 18px; }
.tool:hover { background: color-mix(in srgb, var(--pri) 12%, transparent); border-color: var(--pri); color: var(--pri); }
.tool:active { transform: scale(.93); }

/* ===== Top-right: clock + window controls ===== */
.topright { position: absolute; top: 14px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 40; }
.winctl { display: flex; gap: 2px; -webkit-app-region: no-drag; }
.winbtn { width: 30px; height: 30px; border-radius: 7px; background: transparent; border: none; cursor: pointer;
  color: color-mix(in srgb, var(--text) 55%, transparent); display: grid; place-items: center; transition: background .14s, color .14s; }
.winbtn .ico svg { width: 16px; height: 16px; }
.winbtn:hover { background: color-mix(in srgb, var(--pri) 12%, transparent); color: var(--text); }
.winbtn-close:hover { background: var(--red); color: #fff; }
.clock { text-align: right; line-height: 1.05; }
.clock-time { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--text); letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.clock-date { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; opacity: .45; text-transform: capitalize; margin-top: 2px; }

/* ===== Secondary mini indicator ===== */
.mini { position: absolute; top: 96px; right: 60px; z-index: 35; display: flex; flex-direction: column; align-items: center; opacity: .9; pointer-events: none; }
#mini-canvas { width: 150px; height: 120px; filter: drop-shadow(0 0 12px var(--glow)); }
.mini-cap { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .28em; color: var(--pri); margin-top: -6px; text-shadow: 0 0 10px var(--glow); }

/* ===== Central neural orb ===== */
.orb-stage { position: absolute; top: 7%; left: 0; width: 100%; height: 64%; display: flex; align-items: center; justify-content: center; z-index: 10; }
#sphere-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10;
  filter: drop-shadow(0 0 35px var(--glow)); transition: transform .1s ease-out; cursor: pointer; }
.ambient-halo { position: absolute; top: 50%; left: 50%; width: 55%; height: 55%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen; z-index: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--pri) 20%, transparent) 0%, transparent 70%);
  transition: transform .25s cubic-bezier(.25,.46,.45,.94), background .25s; }
.ripple { position: absolute; border: 1px solid var(--pri); border-radius: 50%; pointer-events: none; z-index: 5;
  animation: ripple-out 1.5s cubic-bezier(.165,.84,.44,1) forwards; }
@keyframes ripple-out { 0%{width:0;height:0;opacity:1} 100%{width:70vh;height:70vh;opacity:0;border-width:0} }
.data-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--pri);
  box-shadow: 0 0 6px var(--pri); filter: blur(.5px); pointer-events: none; z-index: 15; }

/* ===== Caption under orb ===== */
.caption-wrap { position: absolute; top: 70%; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 20; }
.dots { width: 220px; height: 6px; background-image: radial-gradient(var(--pri) 1px, transparent 1.4px); background-size: 9px 6px; opacity: .35; }
.caption { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .35em; text-transform: uppercase; color: var(--pri); text-shadow: 0 0 12px var(--glow); }
.cap-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--pri); box-shadow: 0 0 8px var(--pri); }
.caption[data-state="THINKING"] .cap-dot { background: var(--pri); animation: blink .8s infinite; }
.caption[data-state="SPEAKING"] .cap-dot { background: #29d17a; border-color: #29d17a; box-shadow: 0 0 9px #29d17a; animation: breathe 1s infinite; }
.caption[data-state="MUTED"] { color: var(--red); text-shadow: 0 0 12px rgba(255,51,85,.5); }
.caption[data-state="MUTED"] .cap-dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 9px var(--red); }
@keyframes blink { 50% { opacity: .25; } }
@keyframes breathe { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.6} }

/* ===== File drop zone ===== */
.dropzone { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 13px 40px; min-width: 440px; justify-content: center;
  border: 1px solid var(--hair); border-radius: 12px; background: rgba(10, 20, 32, 0.35);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: color-mix(in srgb, var(--text) 70%, transparent);
  cursor: pointer; transition: border-color .18s, background .18s, color .18s; }
.dropzone .ico svg { width: 15px; height: 15px; }
.dropzone:hover, .dropzone.drag { border-color: var(--pri); color: var(--pri); background: color-mix(in srgb, var(--pri) 8%, transparent); }

/* ===== Response / subtitle line ===== */
.response { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 20;
  width: 80%; text-align: center; font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--text);
  text-shadow: 0 0 18px var(--glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Bottom command bar ===== */
.cmdbar { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--hair); border-radius: 16px;
  background: linear-gradient(180deg, rgba(8,16,26,.55), rgba(4,8,14,.75)); backdrop-filter: blur(12px); }

.mic { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, rgba(14,28,45,.95), rgba(8,16,26,.95)); border: 1px solid var(--pri); color: var(--pri);
  display: grid; place-items: center; box-shadow: 0 0 18px var(--glow); transition: all .25s; }
.mic:hover { background: var(--pri); color: var(--bg); box-shadow: 0 0 26px var(--pri); }
.mic.muted { border-color: var(--amber); color: var(--amber); background: radial-gradient(circle, rgba(40,28,6,.95), rgba(24,16,4,.95)); box-shadow: 0 0 20px rgba(245,158,11,.45); }
.mic.muted:hover { background: var(--amber); color: #1a1200; }

.round-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; cursor: pointer;
  background: rgba(10,20,32,.5); border: 1px solid var(--hair); color: color-mix(in srgb, var(--text) 72%, transparent);
  display: grid; place-items: center; transition: all .16s; }
.round-btn:hover { color: var(--text); border-color: var(--pri); background: color-mix(in srgb, var(--pri) 10%, transparent); }
.round-btn:active { transform: scale(.92); }
.round-btn.send { background: var(--pri); border-color: var(--pri); color: var(--bg); box-shadow: 0 0 16px var(--glow); }
.round-btn.send:hover { filter: brightness(1.12); }
.round-btn.stop { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.round-btn.stop:hover { background: var(--red); color: #fff; border-color: var(--red); }

.cmd-input { flex: 1; display: flex; align-items: center; padding: 13px 20px; border-radius: 12px;
  background: rgba(0,0,0,.35); border: 1px solid var(--hair); transition: border-color .2s, box-shadow .2s; }
.cmd-input:focus-within { border-color: var(--pri); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 14%, transparent); }
.cmd-input input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }
.cmd-input input::placeholder { color: color-mix(in srgb, var(--text) 38%, transparent); }

/* ===== In-app camera panel ===== */
.campreview { position: absolute; bottom: 92px; left: 18px; width: 300px; z-index: 36;
  border: 1px solid var(--pri); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 28px var(--glow); background: #02040a; animation: rise .25s ease; }
.campreview[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.cam-head { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--hair); background: rgba(0,0,0,.4); }
.cam-tag { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .22em; color: var(--pri); text-shadow: 0 0 6px var(--glow); }
.cam-rec { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 7px var(--red); animation: breathe 1.4s infinite; }
.cam-close { width: 24px; height: 24px; border-radius: 6px; background: transparent; border: none; cursor: pointer;
  color: color-mix(in srgb, var(--text) 65%, transparent); display: grid; place-items: center; }
.cam-close:hover { background: var(--red); color: #fff; }
.cam-close .ico svg { width: 13px; height: 13px; }
.campreview video, .campreview img { width: 100%; height: 200px; object-fit: cover; display: block; background: #000; }

/* ===== A11Y + responsive ===== */
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
@media (max-width: 720px) {
  .mini { display: none; } .dropzone { min-width: 0; width: 86%; }
  .response { font-size: 16px; } .clock-time { font-size: 20px; }
  #exitBtn, #fsBtn { display: none; }
}