/* ============================================================
   MIRZAI ASSISTANT — assetsv2/css/assistant.css
   The AI orb + live conversation in the App section.
   Only transform / opacity animate (smooth on phones).
   Logical properties everywhere: Arabic (RTL) mirrors itself.
   ============================================================ */
.mza {
    --o: 150px;                                   /* orb size (grows on big screens) */
    --gold: var(--secondary, #e2bd56);
    --ease: cubic-bezier(.32, .72, 0, 1);
    --lx: 0; --ly: 0;                             /* pointer look, -1..1 (set by JS) */
    position: relative; width: 100%; max-width: 440px; margin-inline: auto;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    color: #fff; isolation: isolate;
}
@media (min-width: 1024px) { .mza { --o: 190px; width: 360px; max-width: none; } }
@media (min-width: 1280px) { .mza { --o: 230px; width: 430px; } }
@media (min-width: 1700px) { .mza { --o: 260px; width: 480px; } }

/* ---------- stage: glow, rings, orb ---------- */
.mza-stage { position: relative; width: calc(var(--o) * 1.9); height: calc(var(--o) * 1.45); display: grid; place-items: center; }
.mza-glow {
    position: absolute; inset: -10%; z-index: -1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(226, 189, 86, .30), rgba(226, 189, 86, .08) 55%, transparent 75%);
    transition: opacity .6s var(--ease), transform .8s var(--ease); opacity: .75;
}
.mza[data-state="listening"] .mza-glow, .mza[data-state="speaking"] .mza-glow { opacity: 1; transform: scale(1.08); }

.mza-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.mza-rings i {
    grid-area: 1 / 1; width: var(--o); height: var(--o); border-radius: 50%;
    border: 1px solid rgba(226, 189, 86, .55);
    animation: mza-ring 4.2s cubic-bezier(.2, .6, .3, 1) infinite;
}
.mza-rings i:nth-child(2) { animation-delay: 1.4s; }
.mza-rings i:nth-child(3) { animation-delay: 2.8s; }
.mza[data-state="listening"] .mza-rings i { animation-duration: 2.2s; }
.mza[data-state="speaking"]  .mza-rings i { animation-duration: 2.8s; }
@keyframes mza-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }

.mza-orb {
    position: relative; width: var(--o); height: var(--o); border-radius: 50%;
    transform: translate(calc(var(--lx) * 7px), calc(var(--ly) * 6px));
    transition: transform .25s ease-out;
    animation: mza-breathe 5s ease-in-out infinite;
    box-shadow: 0 0 calc(var(--o) * .4) rgba(226, 189, 86, .35), 0 0 calc(var(--o) * .9) rgba(226, 189, 86, .12);
}
.mza[data-state="thinking"] .mza-orb { animation-duration: 1.6s; }
@keyframes mza-breathe { 50% { scale: 1.035; } }
.mza-body {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 34% 28%, #fff6cf 0, #e9c765 20%, #b78a2e 48%, #4a3410 78%, #170f03 100%);
}
.mza-body::before {                      /* slow aurora swirling inside the glass */
    content: ""; position: absolute; inset: -30%;
    background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 240, 180, .55) 28%, transparent 40%, rgba(60, 90, 150, .5) 62%, transparent 76%, rgba(255, 220, 130, .45) 90%, transparent);
    filter: blur(calc(var(--o) * .09)); mix-blend-mode: screen;
    animation: mza-spin 18s linear infinite;
}
.mza[data-state="thinking"] .mza-body::before { animation-duration: 3.5s; }
@keyframes mza-spin { to { rotate: 360deg; } }
.mza-body::after {                       /* soft dark rim so it reads as a sphere */
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: inset calc(var(--o) * -.1) calc(var(--o) * -.15) calc(var(--o) * .3) rgba(0, 0, 0, .55);
}
.mza-spec {                              /* highlight that follows the pointer */
    position: absolute; width: 34%; height: 24%; border-radius: 50%;
    inset-inline-start: calc(22% + var(--lx) * 5%); top: calc(12% + var(--ly) * 4%);
    background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent);
    filter: blur(2px); pointer-events: none; transition: inset .25s ease-out, top .25s ease-out;
}
.mza-eyes {
    position: absolute; inset-inline: 0; top: 40%; display: flex; justify-content: center; gap: calc(var(--o) * .15);
    transform: translate(calc(var(--lx) * 9px), calc(var(--ly) * 7px)); transition: transform .2s ease-out;
}
.mza-eyes i {
    width: calc(var(--o) * .095); height: calc(var(--o) * .15); border-radius: 999px; background: #1a1204;
    box-shadow: 0 0 0 calc(var(--o) * .012) rgba(255, 248, 216, .3);
    transform-origin: center; animation: mza-blink 5.2s infinite; transition: scale .3s var(--ease);
}
.mza-eyes i:nth-child(2) { animation-delay: .04s; }
.mza[data-state="listening"] .mza-eyes i { scale: 1.12 1.2; }
.mza[data-state="thinking"]  .mza-eyes i { scale: .75 .55; }
@keyframes mza-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }

/* ---------- voice bars (move only while it speaks) ---------- */
.mza-wave { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 22px; pointer-events: none; }
.mza-wave i { width: 3px; height: 100%; border-radius: 3px; background: var(--gold); opacity: .35; transform: scaleY(.18); transform-origin: bottom; transition: opacity .3s ease; }
.mza[data-state="speaking"] .mza-wave i { opacity: .95; animation: mza-bar .9s ease-in-out infinite; }
.mza-wave i:nth-child(1) { animation-delay: -.1s; } .mza-wave i:nth-child(2) { animation-delay: -.45s; }
.mza-wave i:nth-child(3) { animation-delay: -.25s; } .mza-wave i:nth-child(4) { animation-delay: -.7s; } .mza-wave i:nth-child(5) { animation-delay: -.35s; }
@keyframes mza-bar { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

/* floating sparks */
.mza-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mza-sparks i { position: absolute; bottom: 10%; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: 0; animation: mza-spark 7s linear infinite; }
.mza-sparks i:nth-child(1) { inset-inline-start: 18%; animation-delay: 0s; }   .mza-sparks i:nth-child(2) { inset-inline-start: 82%; animation-delay: 1.4s; }
.mza-sparks i:nth-child(3) { inset-inline-start: 30%; animation-delay: 2.6s; } .mza-sparks i:nth-child(4) { inset-inline-start: 70%; animation-delay: 3.8s; }
.mza-sparks i:nth-child(5) { inset-inline-start: 50%; animation-delay: 5s; }   .mza-sparks i:nth-child(6) { inset-inline-start: 8%; animation-delay: 6s; }
@keyframes mza-spark { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-190px) scale(1.2); opacity: 0; } }

/* ---------- name ---------- */
.mza-id { text-align: center; line-height: 1.2; }
.mza-id b { display: block; font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.mza-id span { display: block; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, .6); }

/* ---------- conversation ---------- */
.mza-chat {
    width: 100%; height: 188px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
@media (min-width: 1280px) { .mza-chat { height: 206px; } }
.mza-b {
    max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
    opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .45s var(--ease), transform .55s var(--ease);
    will-change: transform, opacity;
}
.mza-b.is-in { opacity: 1; transform: none; }
.mza-b.is-old { opacity: .38; transform: translateY(-4px) scale(.98); }
.mza-b.is-gone { opacity: 0; transform: translateY(-14px) scale(.96); }
.mza-q { align-self: flex-end; border-end-end-radius: 5px; }
.mza-a { align-self: flex-start; border-end-start-radius: 5px; background: linear-gradient(135deg, rgba(226, 189, 86, .22), rgba(226, 189, 86, .07)); border-color: rgba(226, 189, 86, .38); }
.mza-ref {
    display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gold); border: 1px solid rgba(226, 189, 86, .45);
    opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s var(--ease);
}
.mza-b.show-ref .mza-ref { opacity: 1; transform: none; }
.mza-dots { align-self: flex-start; display: flex; gap: 5px; padding: 13px 16px; }
.mza-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: mza-dot 1.1s ease-in-out infinite; }
.mza-dots i:nth-child(2) { animation-delay: .15s; } .mza-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mza-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.mza-caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px; vertical-align: -.15em; background: var(--gold); animation: mza-caret 1s steps(1) infinite; }
@keyframes mza-caret { 50% { opacity: 0; } }

/* ---------- quick questions ---------- */
.mza-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mza-chips button {
    font: inherit; font-size: 12px; padding: 9px 14px; min-height: 36px; border-radius: 999px; cursor: pointer; color: #eee;
    border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06);
    transition: background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease; -webkit-tap-highlight-color: transparent;
}
.mza-chips button:hover { background: rgba(226, 189, 86, .16); border-color: rgba(226, 189, 86, .6); color: #fff; }
.mza-chips button:active { transform: scale(.95); }
.mza-chips button.is-on { background: rgba(226, 189, 86, .22); border-color: var(--gold); color: #fff; }
.mza-chips button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- reduced motion: a still, complete picture ---------- */
@media (prefers-reduced-motion: reduce) {
    .mza-rings i, .mza-orb, .mza-body::before, .mza-eyes i, .mza-sparks i, .mza-wave i, .mza-dots i { animation: none !important; }
    .mza-b { transition: none; opacity: 1; transform: none; }
    .mza-ref { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) { .mza-b { -webkit-backdrop-filter: none; backdrop-filter: none; background: #3a3a3a; } }
.mza .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- App section layout: a little more room for the assistant + phone on wide screens ---------- */
@media (min-width: 1280px) {
    #app-connect .lg\:grid-cols-12 > :first-child { grid-column: span 7 / span 7; }
    #app-connect .lg\:grid-cols-12 > :last-child  { grid-column: span 5 / span 5; }
}
/* 1024-1279px: not enough width for assistant + phone side by side, so they stack */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    #app-connect .lg\:grid-cols-12 > :first-child { flex-direction: column; align-items: center; gap: 28px; }
}