/*
 * KJ-SHOP site visual alignment — MIRA standalone page
 * Scope: presentation only. Voice engine, API, SSO and chat behavior are untouched.
 */
:root{
  --bg:#fff;
  --paper:#fff;
  --ink:#292625;
  --muted:#77706c;
  --line:#ded7d2;
  --accent:#9d8b82;
  --shadow:none;
}
html{background:#fff!important}
body{
  background:#fff!important;
  color:#292625;
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.mira-shell{background:#fff}
.mira-header{
  background:#fff;
  border-bottom:1px solid #ded7d2;
}
.brand-mark,.mira-title,.hero-copy{color:#292625}
.mira-title small,.eyebrow{color:#77706c}
.hero h1{font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;color:#292625;font-weight:400}
.hero p,.hero p span{color:#5f5854}
.hero p strong{color:#292625}

/* Store-wide button language: transparent fill, thin outline, six-pixel corners. */
.outline-btn,
.scan-cta,
.product-buy,
.product-view,
.contact-submit,
.send-btn{
  border:1px solid #9d8b82!important;
  border-radius:6px!important;
  background:transparent!important;
  color:#292625!important;
  box-shadow:none!important;
  font-weight:400;
  text-decoration:none;
}
.outline-btn:hover,
.scan-cta:hover,
.product-buy:hover,
.product-view:hover,
.contact-submit:hover,
.send-btn:hover{
  border-color:#806f66!important;
  background:transparent!important;
  color:#292625!important;
}
.outline-btn{letter-spacing:.06em}
.scan-cta{letter-spacing:.04em}
.product-buy,.product-view{min-height:36px;letter-spacing:.02em}
.contact-submit{min-height:40px;letter-spacing:.05em;text-transform:none}
.send-btn{
  width:48px;
  min-width:48px;
  height:44px;
  min-height:44px;
  border-radius:6px!important;
  font-size:20px;
}
.send-btn:disabled{opacity:.38}

/* White, light-weight panels instead of the former beige/glass cards. */
.chat-card{
  background:#fff!important;
  border:1px solid #ded7d2;
  border-radius:6px;
  box-shadow:none!important;
  backdrop-filter:none;
}
.chat-log{background:#fff}
.msg.mira .bubble{
  background:#f7f7f7;
  color:#292625;
  border:1px solid #ededed;
  border-radius:6px;
}
.msg.user .bubble{
  background:#fff;
  color:#292625;
  border:1px solid #ded7d2;
  border-radius:6px;
}
.scan-bubble{
  background:#fff!important;
  border:1px solid #ded7d2;
  border-radius:6px;
}
.scan-cta{background:transparent!important}

/* Composer and message field use the same fine outline as the shop. */
.composer{
  background:#fff;
  border-top:1px solid #ded7d2;
  box-shadow:none;
}
.composer textarea,
textarea#messageInput{
  border:1px solid #ded7d2;
  border-radius:6px;
  background:transparent;
  color:#292625;
  padding:10px 12px;
}
.composer textarea::placeholder,
textarea#messageInput::placeholder{color:#77706c;font-weight:400}
.composer textarea:focus,
textarea#messageInput:focus{
  border-color:#9d8b82;
  box-shadow:0 0 0 2px rgba(157,139,130,.08);
}
.disclaimer{color:#77706c}
.typing{color:#77706c}

/* Product cards: quiet borders, no floating shadows or oversized rounding. */
.product{
  border:1px solid #ded7d2;
  border-radius:6px;
  background:#fff;
  box-shadow:none;
}
.product img,.product-image-placeholder{background:#f7f7f7}
.product-buy{background:transparent!important;color:#292625!important;border-color:#9d8b82!important}
.product-view{background:transparent!important;color:#292625!important;border-color:#9d8b82!important}
.product-body{background:#fff}
.product-routine-step{border-radius:6px}

/* Contact form and its inputs follow the same minimal language. */
.contact-request{
  background:#fff;
  border:1px solid #ded7d2;
  border-radius:6px;
  box-shadow:none;
}
.contact-form label{color:#77706c}
.contact-form input,
.contact-form textarea{
  background:#fff;
  border:1px solid #ded7d2;
  border-radius:6px;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#9d8b82;
  box-shadow:0 0 0 2px rgba(157,139,130,.08);
}

/* Product cards rendered by the voice/chat assistant. */
.mira-product-card{
  border:1px solid #ded7d2;
  border-radius:6px;
  background:#fff;
  box-shadow:none;
}
.mira-product-card__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 11px;
  border:1px solid #9d8b82;
  border-radius:6px;
  background:transparent;
  color:#292625;
  text-decoration:none;
}
.mira-product-card__link:hover{
  border-color:#806f66;
  background:transparent;
  color:#292625;
}

/* Keep the independent floating microphone as a separate round control. */
.mira-voice-float{
  border-radius:50%;
  box-shadow:none;
}
.mira-scroll-top{border-radius:50%}

@media(max-width:620px){
  .mira-shell{background:#fff}
  .hero{background:#fff}
  .chat-card{border-radius:6px}
  .contact-request{border-radius:6px}
  .outline-btn{border-radius:6px!important}
  .product-grid{gap:10px}
  .composer{padding:12px}
}

/* MIRA state-synchronized avatar + existing floating microphone.
   Presentation only. Existing voice runtime continues to provide data-voice/data-state. */
body .avatar-wrap::before,
body .avatar-wrap::after{display:none!important}
body .avatar-wrap.mira-avatar-voice-trigger[data-voice-active="true"]::after{display:none!important}
body .avatar-wrap img{
  transition:filter .22s ease;
  animation:none;
}
body .avatar-wrap[data-voice="idle"] img,
body .avatar-wrap[data-voice="error"] img{
  filter:drop-shadow(0 24px 35px rgba(65,45,35,.14));
  animation:none;
}
body .avatar-wrap[data-voice="listening"] img{
  animation:miraContourListening 1.9s ease-in-out infinite;
}
body .avatar-wrap[data-voice="thinking"] img{
  animation:miraContourThinking 1.9s ease-in-out infinite;
}
body .avatar-wrap[data-voice="speaking"] img{
  animation:miraContourSpeaking 1.9s ease-in-out infinite;
}
@keyframes miraContourListening{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,248,246,.68)) drop-shadow(0 0 10px rgba(205,104,121,.46)) drop-shadow(0 0 24px rgba(190,91,117,.25)) drop-shadow(0 24px 35px rgba(65,45,35,.14))}
  50%{filter:drop-shadow(0 0 3px rgba(255,250,248,.82)) drop-shadow(0 0 15px rgba(222,112,130,.72)) drop-shadow(0 0 34px rgba(198,91,117,.4)) drop-shadow(0 24px 35px rgba(65,45,35,.14))}
}
@keyframes miraContourThinking{
  0%,100%{filter:drop-shadow(0 0 2px rgba(237,255,251,.56)) drop-shadow(0 0 9px rgba(105,195,181,.30)) drop-shadow(0 0 22px rgba(91,181,170,.16)) drop-shadow(0 24px 35px rgba(65,45,35,.14))}
  50%{filter:drop-shadow(0 0 3px rgba(245,255,253,.72)) drop-shadow(0 0 13px rgba(112,209,194,.48)) drop-shadow(0 0 30px rgba(82,177,166,.26)) drop-shadow(0 24px 35px rgba(65,45,35,.14))}
}
@keyframes miraContourSpeaking{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,250,235,.68)) drop-shadow(0 0 10px rgba(255,145,36,.46)) drop-shadow(0 0 24px rgba(235,106,29,.25)) drop-shadow(0 24px 35px rgba(65,45,35,.14))}
  50%{filter:drop-shadow(0 0 3px rgba(255,252,239,.82)) drop-shadow(0 0 15px rgba(255,171,40,.72)) drop-shadow(0 0 34px rgba(242,114,25,.4)) drop-shadow(0 24px 35px rgba(65,45,35,.14))}
}

/* Reuse the existing round mic control; only synchronize its presentation. */
body .mira-voice-float[data-state="listening"]{
  color:#c76578;border-color:rgba(205,104,121,.92);
  background:rgba(255,244,247,.97);
  animation:miraMicListening 1.9s ease-in-out infinite;
}
body .mira-voice-float[data-state="thinking"]{
  color:#479f93;border-color:rgba(105,195,181,.92);
  background:rgba(239,253,250,.97);
  animation:miraMicThinking 1.9s ease-in-out infinite;
}
body .mira-voice-float[data-state="speaking"]{
  color:#c47a23;border-color:rgba(255,160,48,.95);
  background:rgba(255,249,239,.98);
  animation:miraMicSpeaking 1.9s ease-in-out infinite;
}
body .mira-voice-float[data-state="listening"]::before,
body .mira-voice-float[data-state="thinking"]::before,
body .mira-voice-float[data-state="speaking"]::before{
  display:block;inset:-3px;border-color:currentColor;
  animation:miraMicRing 1.9s ease-in-out infinite;
}
body .mira-voice-float[data-state="listening"]::after,
body .mira-voice-float[data-state="thinking"]::after,
body .mira-voice-float[data-state="speaking"]::after{
  display:none;animation:none;
}
@keyframes miraMicListening{
  0%,100%{box-shadow:0 0 0 5px rgba(205,104,121,.07),0 0 20px rgba(190,91,117,.14)}
  50%{box-shadow:0 0 0 8px rgba(222,112,130,.11),0 0 28px rgba(198,91,117,.22)}
}
@keyframes miraMicThinking{
  0%,100%{box-shadow:0 0 0 5px rgba(105,195,181,.07),0 0 20px rgba(91,181,170,.14)}
  50%{box-shadow:0 0 0 8px rgba(112,209,194,.11),0 0 28px rgba(82,177,166,.22)}
}
@keyframes miraMicSpeaking{
  0%,100%{box-shadow:0 0 0 5px rgba(255,145,36,.08),0 0 22px rgba(235,106,29,.17)}
  50%{box-shadow:0 0 0 8px rgba(255,171,40,.12),0 0 30px rgba(242,114,25,.28)}
}
@keyframes miraMicRing{
  0%,100%{opacity:.20;transform:scale(.98)}
  50%{opacity:.58;transform:scale(1.16)}
}
@media(prefers-reduced-motion:reduce){
  body .avatar-wrap img,
  body .mira-voice-float,
  body .mira-voice-float::before,
  body .mira-voice-float::after{animation:none!important;transition:none!important}
}

/* Mobile correction 08.11.2026:
   keep the floating mic in document flow while scrolling and add true
   alpha-silhouette ripples to the portrait on touch-sized layouts. */
@media(max-width:700px){
  body .mira-voice-float{
    position:absolute!important;
    top:50vh;
    bottom:auto!important;
    transform:translateY(-50%);
  }
  body .mira-voice-float:hover{
    transform:translateY(-50%);
  }

  body .avatar-wrap.mira-avatar-voice-trigger::before,
  body .avatar-wrap.mira-avatar-voice-trigger::after{
    content:"";
    display:block!important;
    position:absolute;
    inset:0;
    z-index:0;
    border:0!important;
    border-radius:0!important;
    pointer-events:none;
    opacity:0;
    transform:scale(.995);
    transform-origin:50% 50%;
    background-color:var(--mira-silhouette-wave-color,rgba(205,104,121,.3));
    -webkit-mask-image:url("/mira/assets/mira-avatar.png?v=20261104-photo-r1");
    mask-image:url("/mira/assets/mira-avatar.png?v=20261104-photo-r1");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center bottom;
    mask-position:center bottom;
    -webkit-mask-size:contain;
    mask-size:contain;
    filter:drop-shadow(0 0 10px var(--mira-silhouette-wave-glow,rgba(205,104,121,.42)));
  }
  body .avatar-wrap.mira-avatar-voice-trigger > picture{
    position:relative;
    z-index:1;
  }

  body .avatar-wrap[data-voice="listening"]{
    --mira-silhouette-wave-color:rgba(205,104,121,.38);
    --mira-silhouette-wave-glow:rgba(205,104,121,.58);
  }
  body .avatar-wrap[data-voice="thinking"]{
    --mira-silhouette-wave-color:rgba(105,195,181,.36);
    --mira-silhouette-wave-glow:rgba(91,181,170,.58);
  }
  body .avatar-wrap[data-voice="speaking"]{
    --mira-silhouette-wave-color:rgba(255,160,48,.36);
    --mira-silhouette-wave-glow:rgba(242,114,25,.58);
  }

  body .avatar-wrap[data-voice="listening"]::before,
  body .avatar-wrap[data-voice="thinking"]::before,
  body .avatar-wrap[data-voice="speaking"]::before{
    animation:miraSilhouetteRipple 1.9s cubic-bezier(.18,.58,.35,1) infinite;
  }
  body .avatar-wrap[data-voice="listening"]::after,
  body .avatar-wrap[data-voice="thinking"]::after,
  body .avatar-wrap[data-voice="speaking"]::after{
    animation:miraSilhouetteRipple 1.9s cubic-bezier(.18,.58,.35,1) .95s infinite;
  }
}
@keyframes miraSilhouetteRipple{
  0%{opacity:0;transform:scale(.995)}
  12%{opacity:.52;transform:scale(1.005)}
  68%{opacity:.28;transform:scale(1.085)}
  100%{opacity:0;transform:scale(1.15)}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  body .avatar-wrap.mira-avatar-voice-trigger::before,
  body .avatar-wrap.mira-avatar-voice-trigger::after{
    animation:none!important;
    opacity:0!important;
  }
}

/* The prior global UI reset hid the active avatar ::after layer. Re-enable
   that exact layer on touch layouts so the second staggered silhouette wave renders. */
@media(max-width:700px){
  body .avatar-wrap.mira-avatar-voice-trigger[data-voice-active="true"]::after{
    display:block!important;
  }
}

/* Keep the mobile mic alongside the portrait initially; it scrolls away with the document. */
@media(max-width:620px){
  body .mira-voice-float{top:211px}
}
@media(min-width:621px) and (max-width:700px){
  body .mira-voice-float{top:264px}
}

/* Correction 08.11.2026: the mobile microphone is viewport-fixed,
   not attached to the avatar/document flow. Keep its screen coordinate
   stable while the page scrolls; silhouette waves remain unchanged. */
@media(max-width:700px){
  body .mira-voice-float{
    position:fixed!important;
    left:10px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
  }
  body .mira-voice-float:hover{
    transform:translateY(-50%)!important;
  }
}

/* Chat scroll chaining for desktop wheel and mobile touch:
   when the conversation panel has no more inner scroll range, let the
   same vertical gesture continue scrolling the MIRA page. */
body .chat-log{
  overscroll-behavior-y:auto!important;
}
@media(max-width:700px){
  body .chat-log{
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
}