/* MIRA Voice UI v1 — visual layer only.
 * Voice v9 engine remains untouched. This file only styles the separate UI shell.
 */
.mira-voice-float{
  position:fixed;
  left:clamp(10px,2vw,28px);
  top:50%;
  transform:translateY(-50%);
  z-index:100000;
  width:58px;
  height:58px;
  border:1px solid rgba(104,82,86,.52);
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#59484b;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .35s ease, background-color .35s ease, box-shadow .5s ease, transform .25s ease;
  backdrop-filter:blur(10px);
}
.mira-voice-float:hover{transform:translateY(-50%) scale(1.035)}
.mira-voice-float:focus-visible{outline:2px solid rgba(222,145,166,.65);outline-offset:4px}
.mira-voice-float svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.mira-voice-float::before,
.mira-voice-float::after{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid rgba(222,145,166,0);
  border-radius:50%;
  pointer-events:none;
}
.mira-voice-float[data-state="listening"]{
  border-color:rgba(222,145,166,.92);
  background:rgba(255,245,248,.96);
  box-shadow:0 0 0 5px rgba(222,145,166,.08),0 0 24px rgba(222,145,166,.18);
  animation:miraVoiceSoftPulse 2.8s ease-in-out infinite;
}
.mira-voice-float[data-state="listening"]::before{animation:miraVoiceWave 2.8s ease-out infinite}
.mira-voice-float[data-state="listening"]::after{animation:miraVoiceWave 2.8s ease-out 1.4s infinite}
.mira-voice-float[data-state="thinking"]{
  border-color:rgba(222,145,166,.8);
  background:rgba(255,247,249,.95);
  box-shadow:0 0 0 5px rgba(222,145,166,.06),0 0 20px rgba(222,145,166,.14);
}
.mira-voice-float[data-state="speaking"]{
  border-color:rgba(222,145,166,.96);
  background:rgba(255,241,246,.97);
  box-shadow:0 0 0 6px rgba(222,145,166,.09),0 0 30px rgba(222,145,166,.23);
  animation:miraVoiceSpeakPulse 2.1s ease-in-out infinite;
}
.mira-voice-float[data-state="error"]{
  border-color:rgba(104,82,86,.65);
  background:rgba(255,255,255,.9);
}
.mira-voice-float__hint{
  position:absolute;
  left:70px;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  padding:8px 11px;
  border:1px solid rgba(104,82,86,.12);
  border-radius:12px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  font:500 11px/1.25 Arial,sans-serif;
  letter-spacing:.03em;
  color:#59484b;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.mira-voice-float:hover .mira-voice-float__hint,
.mira-voice-float:focus-visible .mira-voice-float__hint{opacity:1}
.mira-avatar-voice-trigger{
  cursor:pointer;
  position:relative;
  border-radius:24px;
  outline:none;
}
.mira-avatar-voice-trigger:focus-visible{box-shadow:0 0 0 3px rgba(222,145,166,.38)}
.mira-avatar-voice-trigger[data-voice-active="true"]::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(222,145,166,.46);
  border-radius:28px;
  pointer-events:none;
  animation:miraAvatarGlow 2.8s ease-in-out infinite;
}
.mira-avatar-voice-trigger[data-voice-state="speaking"]::after{
  border-color:rgba(222,145,166,.72);
  box-shadow:0 0 22px rgba(222,145,166,.2);
}
.mira-scroll-top{
  position:fixed;
  left:clamp(14px,2vw,28px);
  bottom:clamp(14px,2vw,24px);
  z-index:99998;
  width:46px;
  height:46px;
  border:1px solid rgba(41,38,37,.22);
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#292625;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s ease,visibility .3s ease,transform .3s ease,box-shadow .3s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.09);
  backdrop-filter:blur(10px);
}
.mira-scroll-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.mira-scroll-top:hover{box-shadow:0 10px 28px rgba(0,0,0,.13);transform:translateY(-2px)}
.mira-scroll-top:focus-visible{outline:2px solid rgba(222,145,166,.65);outline-offset:3px}
.mira-scroll-top svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes miraVoiceSoftPulse{0%,100%{box-shadow:0 0 0 5px rgba(222,145,166,.07),0 0 20px rgba(222,145,166,.14)}50%{box-shadow:0 0 0 8px rgba(222,145,166,.11),0 0 28px rgba(222,145,166,.22)}}
@keyframes miraVoiceSpeakPulse{0%,100%{box-shadow:0 0 0 5px rgba(222,145,166,.08),0 0 22px rgba(222,145,166,.17)}50%{box-shadow:0 0 0 9px rgba(222,145,166,.12),0 0 34px rgba(222,145,166,.28)}}
@keyframes miraVoiceWave{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.8);opacity:0}}
@keyframes miraAvatarGlow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.008)}}
@media(max-width:700px){
  .mira-voice-float{left:10px;width:52px;height:52px}
  .mira-voice-float__hint{display:none}
  .mira-scroll-top{left:12px;bottom:12px;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .mira-voice-float,.mira-voice-float::before,.mira-voice-float::after,.mira-avatar-voice-trigger::after{animation:none!important;transition:none!important}
}
/* Hide the original Voice v9 visual shell only; its JS engine remains loaded and untouched. */
#miraVoice{display:none!important}
.mira-product-card__step{display:inline-block;margin:0 0 7px;padding:4px 8px;border-radius:6px;background:#f3eee9;color:#6e5141;font-size:11px;font-weight:600;line-height:1.35}