:root{
  --jarvis-cyan:#22d3ee;
  --jarvis-cyan2:#0ea5e9;
  --jarvis-dark:#020617;
  --jarvis-panel:#0b1220;
  --jarvis-text:#e2e8f0;
  --jarvis-muted:#94a3b8;
  --jarvis-border:rgba(34,211,238,.22);
  --jarvis-shadow:0 20px 50px rgba(2,6,23,.45);
}

.jarvis{
  position:fixed;
  right:140px;
  bottom:40px;
  z-index:1001;
  font-family:Segoe UI,system-ui,-apple-system,Roboto,Arial;
}

.jarvis-mic{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid var(--jarvis-border);
  background:radial-gradient(circle at 30% 25%, rgba(34,211,238,.35), rgba(2,6,23,.8));
  color:var(--jarvis-text);
  box-shadow:0 0 0 0 rgba(34,211,238,.32), 0 12px 40px rgba(2,6,23,.35);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}

.jarvis-mic:hover{transform:translateY(-2px);box-shadow:0 0 0 10px rgba(34,211,238,.06), 0 18px 44px rgba(2,6,23,.45)}
.jarvis-mic i{font-size:22px}

.jarvis-mic-ring{
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:2px solid rgba(34,211,238,.25);
  filter:drop-shadow(0 0 10px rgba(34,211,238,.25));
  opacity:.85;
  pointer-events:none;
}

.jarvis-mic-ring2{
  inset:-18px;
  opacity:.5;
}

.jarvis.listening .jarvis-mic{
  box-shadow:0 0 0 12px rgba(34,211,238,.12), 0 0 55px rgba(34,211,238,.22), 0 22px 60px rgba(2,6,23,.55);
}

.jarvis.listening .jarvis-mic-ring{
  animation:jarvisPulse 1.3s ease-in-out infinite;
}

.jarvis.listening .jarvis-mic-ring2{
  animation:jarvisPulse 1.3s ease-in-out infinite .22s;
}

@keyframes jarvisPulse{
  0%{transform:scale(.95);opacity:.85}
  70%{transform:scale(1.05);opacity:.25}
  100%{transform:scale(.95);opacity:.85}
}

.jarvis-panel{
  width:340px;
  height:360px;
  position:absolute;
  right:0;
  bottom:78px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(11,18,32,.98), rgba(2,6,23,.98));
  border:1px solid var(--jarvis-border);
  box-shadow:var(--jarvis-shadow);
  overflow:hidden;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

.jarvis.open .jarvis-panel{opacity:1;transform:translateY(0);pointer-events:auto}

.jarvis-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(148,163,184,.14);
}

.jarvis-title{display:flex;align-items:center;gap:10px;color:var(--jarvis-text);font-weight:700;letter-spacing:.3px}
.jarvis-dot{width:10px;height:10px;border-radius:50%;background:var(--jarvis-cyan);box-shadow:0 0 18px rgba(34,211,238,.45)}

.jarvis-close{
  background:transparent;
  border:none;
  color:var(--jarvis-text);
  cursor:pointer;
  font-size:16px;
  padding:6px 8px;
  border-radius:10px;
}

.jarvis-close:hover{background:rgba(148,163,184,.12)}

.jarvis-panel-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 104px)}

.jarvis-status{font-size:12px;color:var(--jarvis-muted)}

.jarvis-wave{display:flex;align-items:flex-end;gap:6px;height:24px;opacity:.25}
.jarvis-wave span{width:6px;border-radius:999px;background:linear-gradient(180deg,var(--jarvis-cyan),var(--jarvis-cyan2));height:8px;transition:height .18s ease}

.jarvis.listening .jarvis-wave{opacity:1}
.jarvis.listening .jarvis-wave span{animation:jarvisBars 1.1s ease-in-out infinite}
.jarvis.listening .jarvis-wave span:nth-child(2){animation-delay:.12s}
.jarvis.listening .jarvis-wave span:nth-child(3){animation-delay:.24s}
.jarvis.listening .jarvis-wave span:nth-child(4){animation-delay:.36s}
.jarvis.listening .jarvis-wave span:nth-child(5){animation-delay:.48s}

@keyframes jarvisBars{
  0%,100%{height:8px}
  50%{height:22px}
}

.jarvis-log{
  flex:1;
  overflow:auto;
  border:1px solid rgba(148,163,184,.12);
  border-radius:12px;
  padding:10px;
  background:rgba(2,6,23,.55);
  color:var(--jarvis-text);
  font-size:13px;
  line-height:1.35;
}

.jarvis-log .row{margin:0 0 10px}
.jarvis-log .you{color:#a5b4fc}
.jarvis-log .me{color:#67e8f9}

.jarvis-panel-footer{
  padding:12px 14px;
  border-top:1px solid rgba(148,163,184,.14);
  display:flex;
  gap:10px;
}

.jarvis-btn{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(34,211,238,.22);
  background:rgba(34,211,238,.12);
  color:var(--jarvis-text);
  cursor:pointer;
  font-weight:700;
}

.jarvis-btn:hover{background:rgba(34,211,238,.18)}

.jarvis-btn-secondary{
  border-color:rgba(148,163,184,.22);
  background:rgba(148,163,184,.08);
}

.jarvis-btn-secondary:hover{background:rgba(148,163,184,.14)}

@media (max-width:768px){
  .jarvis{right:20px;bottom:20px}
  .jarvis-panel{width:92vw;max-width:360px;right:0}
}