.jarvis-avatar-grid{
  display:grid;
  gap:18px;
}
.jarvis-avatar-widget{
  width:100%;
}
.jarvis-avatar-shell{
  border:1px solid rgba(53,225,255,.18);
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(4,16,15,.92), rgba(2,8,10,.9)),
    radial-gradient(circle at 50% 0%, rgba(98,217,255,.08), transparent 36%);
  box-shadow: inset 0 0 26px rgba(72,255,143,.04), 0 18px 44px rgba(0,0,0,.35);
  padding:18px 16px 16px;
}
.jarvis-avatar-header{
  text-align:center;
  color:rgba(212,255,231,.72);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:8px;
}
.jarvis-avatar-trigger{
  position:relative;
  display:block;
  width:min(100%, 330px);
  aspect-ratio:520 / 640;
  min-height:0;
  margin:0 auto;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  filter:
    drop-shadow(0 24px 36px rgba(0,0,0,.5))
    drop-shadow(0 0 18px rgba(72,255,143,.16))
    drop-shadow(0 0 42px rgba(98,217,255,.10));
}
.jarvis-avatar-trigger:focus-visible{
  outline:2px solid rgba(72,255,143,.7);
  outline-offset:6px;
  border-radius:22px;
}
.jarvis-avatar-trigger.is-speaking{
  transform:translateY(-1px);
}
.jarvis-avatar-trigger::after{
  content:"Avatar anklicken";
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(72,255,143,.26);
  background:rgba(2,10,9,.78);
  color:#dfffee;
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  pointer-events:none;
  opacity:.9;
}
.jarvis-avatar-trigger.is-speaking::after{
  content:"Spricht gerade";
}
#faceCanvas,
#neuralCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#neuralCanvas{ z-index:0; opacity:.72; }
#faceCanvas{ z-index:1; }

.jarvis-avatar-widget .status-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:24px;
  margin-top:6px;
  font-size:.72rem;
  color:rgba(212,255,231,.55);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.jarvis-avatar-widget .status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22b866;
  box-shadow:0 0 8px #48ff8f;
  transition:.2s ease;
}
.jarvis-avatar-widget .status-dot.speaking{
  background:#48ff8f;
  box-shadow:0 0 14px #48ff8f, 0 0 28px rgba(72,255,143,.34);
  animation:jarvisAvatarPulse .36s ease-in-out infinite alternate;
}
@keyframes jarvisAvatarPulse{
  from{transform:scale(1)}
  to{transform:scale(1.58)}
}
.jarvis-avatar-widget .text-display{
  width:100%;
  min-height:88px;
  margin-top:10px;
  padding:15px 18px 14px;
  color:#d9ffeb;
  font-size:clamp(.75rem,2.2vw,.86rem);
  line-height:1.55;
  letter-spacing:.02em;
  background:
    linear-gradient(180deg, rgba(5,20,18,.93), rgba(3,10,9,.84)),
    radial-gradient(circle at 12% 0%, rgba(255,195,111,.08), transparent 35%);
  border:1px solid rgba(98,217,255,.22);
  border-radius:12px;
  box-shadow:inset 0 0 24px rgba(72,255,143,.045), 0 14px 32px rgba(0,0,0,.28);
  position:relative;
  overflow:hidden;
}
.jarvis-avatar-widget .text-display::before{
  content:attr(data-label);
  position:absolute;
  top:-1px;
  left:14px;
  padding:0 5px;
  font-size:.56rem;
  letter-spacing:.2em;
  color:rgba(98,217,255,.58);
  background:#04100e;
  text-transform:uppercase;
}
.jarvis-avatar-widget .text-highlight{
  color:#fff7d7;
  text-shadow:0 0 10px rgba(255,195,111,.46), 0 0 20px rgba(72,255,143,.34);
}
.jarvis-avatar-widget .file-list{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:11px;
}
.jarvis-avatar-widget .file-chip{
  height:30px;
  min-width:58px;
  padding:0 10px;
  font:inherit;
  font-size:.64rem;
  letter-spacing:.12em;
  color:rgba(212,255,231,.58);
  background:rgba(2,9,8,.52);
  border:1px solid rgba(72,255,143,.21);
  border-radius:6px;
  cursor:pointer;
  transition:.15s ease;
}
.jarvis-avatar-widget .file-chip:hover,
.jarvis-avatar-widget .file-chip.active{
  color:#eafff2;
  border-color:#48ff8f;
  background:rgba(72,255,143,.075);
  box-shadow:0 0 12px rgba(72,255,143,.19);
}
.jarvis-avatar-widget .controls{
  display:grid;
  grid-template-columns:repeat(3, 46px);
  gap:11px;
  justify-content:center;
  margin-top:14px;
}
.jarvis-avatar-widget .avatar-btn{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:#48ff8f;
  background:rgba(3,12,10,.76);
  border:1px solid rgba(72,255,143,.42);
  border-radius:8px;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.jarvis-avatar-widget .avatar-btn:hover{
  transform:translateY(-1px);
  border-color:#48ff8f;
  box-shadow:0 0 16px rgba(72,255,143,.24);
}
.jarvis-avatar-widget .avatar-btn:active{ transform:scale(.96); }
.jarvis-avatar-widget .avatar-btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.jarvis-avatar-widget .avatar-btn.stop{
  color:#ff7777;
  border-color:rgba(255,119,119,.45);
}
.jarvis-avatar-widget .footer-info{
  min-height:18px;
  margin-top:12px;
  color:rgba(212,255,231,.32);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}
.hero-avatar-copy .actions{
  margin-top:18px;
}
.hero-avatar-copy .btn{
  padding:10px 14px;
}
@media (max-width:430px){
  .jarvis-avatar-widget .controls{grid-template-columns:repeat(3,42px);gap:9px}
  .jarvis-avatar-widget .avatar-btn{width:42px;height:42px}
}


/* clean-avatar-ui: Auf der öffentlichen Startseite nur Avatar anzeigen */
.jarvis-avatar-widget .status-bar,
.jarvis-avatar-widget .text-display,
.jarvis-avatar-widget .file-list,
.jarvis-avatar-widget .controls,
.jarvis-avatar-widget .footer-info{
  display:none !important;
}

.jarvis-avatar-shell{
  padding:18px 16px 18px;
}

.jarvis-avatar-trigger{
  margin-bottom:0;
}