/* ==========================================================================
   mirror-mobile.css — آینه روی گوشیِ ایستاده (js/mirror-mobile.js).
   بعد از mirror.css و fa.css.
   ========================================================================== */

/* وارونگیِ آینه از متغیرِ ‎--flip‎ (js/mirror.js)، روی همه‌ی اندازه‌ها. */
#ig-view{transform:scaleX(var(--flip,1))}
#ig-gl{transform:translate(-50%,-50%) scaleX(var(--flip,1))}

.mo-panel,.mo-fit,.grip-hint{display:none}

/* ---------------------------------------------- مرجعِ اندازه (همه‌جا) --- */
.refpick{display:grid;gap:.45rem;padding:.7rem .75rem;border:1px solid var(--line);border-radius:10px}
.refpick .ref-h{font-size:.66rem;color:var(--bone-dim)}
.refpick .ref-ask{display:none;margin:0;font-size:.72rem;line-height:1.7;color:var(--bronze-lit,#E3C795)}
.refpick.ask .ref-ask{display:block}
.refpick.ask{border-color:var(--bronze);background:rgba(201,160,99,.08)}
.ref-ages{display:flex;flex-wrap:wrap;gap:.35rem}
.ref-ages button{padding:.4em .8em;border-radius:999px;border:1px solid rgba(201,160,99,.3);
  background:transparent;color:var(--bone);font:inherit;font-size:.72rem;cursor:pointer}
.ref-ages button[aria-pressed="true"]{background:var(--bronze);border-color:var(--bronze);color:#1A1209;font-weight:600}
/* ‎.ref-pd‎ داخلِ ‎.refpick‎ است، نه ‎.tune‎ — سلکتورِ قبلی به هیچ‌چیز نمی‌خورد. */
.refpick .ref-pd{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:.66rem;color:var(--bone-dim);
  letter-spacing:0;text-transform:none}
.ref-pd input{width:4.2rem;min-height:32px;padding:.2em .5em;border-radius:8px;border:1px solid var(--line);
  background:rgba(11,9,6,.5);color:var(--bone);font:inherit;font-size:.85rem;text-align:center;direction:ltr}
.refpick .ref-note{margin:0;font-size:.62rem;line-height:1.7;color:var(--bone-dim)}

@media(max-width:920px) and (orientation:portrait){

  /* ---------------------------------------------- ۱. تصویرِ عمودی ----
     هر دو بوم (ویدئو و فریمِ سه‌بعدی) با یک قاعده جا می‌گیرند، پس فریم روی
     صورت می‌ماند. پایینش تا لبه‌ی برگه‌ی جمع‌شده. */
  .stage-wrap{padding-bottom:0}
  #ig-view,#ig-gl,.dbg{
    position:absolute;left:0;top:0;width:100%;
    /* برگه‌ی جمع‌شده ‎--peek‎ به‌اضافه‌ی ناحیه‌ی امنِ پایین (نوارِ خانه‌ی آیفون)
       را می‌پوشاند — همان که ‎transform‎ِ ‎.sheet‎ در mirror.css حساب می‌کند. */
    height:calc(100% - var(--peek) - var(--safe-b) + 1.4rem);
    max-width:none;max-height:none;object-fit:contain;object-position:50% 40%;
  }
  /* ⚠ فقط تصویرِ **عمودی** پرِ صفحه می‌شود (کمی از لبه‌ها). تصویرِ افقی
     بریده نمی‌شود: بریدنش یعنی زوم، و صورتی که فقط با دستِ خیلی دراز در
     قاب جا می‌شود. js/mirror.js اول تلاش می‌کند عمودیِ کامل بگیرد. */
  .cam-tall #ig-view,.cam-tall #ig-gl,.cam-tall .dbg{object-fit:cover}
  #ig-view,#ig-gl{transform:scaleX(var(--flip,1))}
  .dbg{transform:none}
  .bar{position:relative;z-index:7}
  /* پرده‌ی «دوربین را روشن کنید» روی گوشیِ کوتاه (۳۲۰×۵۶۸): متن و دکمه باید
     بالای برگه‌ی جمع‌شده جا شوند وگرنه دکمه زیرِ برگه می‌رود و نمی‌شود لمسش
     کرد. ‎safe‎: اگر باز هم جا نشد، از بالا شروع می‌شود و اسکرول می‌شود. */
  /* ⚠ ‎padding-bottom‎ِ ‎.curtain‎ در mirror.css داخلِ ‎@media‎ است ولی قاعده‌ی
     پایه‌ی ‎.curtain{padding:1.5rem}‎ دیرتر در همان فایل می‌آید و آن را باطل
     می‌کرد (محاسبه‌شده ۲۴px)؛ پس پرده تا ته‌ی صفحه وسط‌چین می‌شد و دکمه‌ی
     «دوربین را روشن کنید» زیرِ برگه می‌رفت. اینجا دوباره، پس از آن. */
  .curtain{padding-bottom:calc(var(--peek) + var(--safe-b) + 1.5rem);align-content:safe center}
  @media(max-height:640px){
    .curtain{gap:.7rem;padding-top:.8rem}
    .curtain h2{font-size:1.2rem}
    .curtain p{font-size:.8rem;line-height:1.55}
  }

  /* دکمه‌های کنارِ تصویر: بالا، کنارِ هم، دور از صورت. */
  .stage-btns{top:.7rem;bottom:auto;right:.7rem;left:auto;grid-auto-flow:row}
  .icon.is-on{background:var(--bronze);color:var(--black)}
  /* راهنمای ردیابی («وارد کادر شوید»…) بالای تصویر، زیرِ برچسبِ نتیجه: پایین،
     پشتِ پنلِ تنظیم (نیمه‌شفاف) گم می‌شد. از ستونِ دکمه‌های راست دور می‌ماند. */
  .hint{top:4rem;bottom:auto;max-width:calc(100% - 8.5rem);font-size:.72rem;letter-spacing:.02em}

  /* -------------------------------------------- ۲. «بالا بکشید» ------- */
  .grip-hint{
    display:none;align-items:center;justify-content:center;gap:.35rem;
    margin-top:.4rem;font-family:var(--body,system-ui);font-size:.72rem;letter-spacing:0;
    color:var(--bronze-lit,#E3C795);
  }
  .grip-hint svg{animation:mo-up 1.6s var(--ease) infinite}
  .sheet.show-hint .grip-hint{display:flex}
  .sheet.show-hint .grip::before{background:var(--bronze)}
  @keyframes mo-up{0%,100%{transform:translateY(2px);opacity:.55}50%{transform:translateY(-3px);opacity:1}}

  /* تکانِ برگه بعد از اولین اندازه‌گیری */
  .sheet.is-nudge{animation:mo-nudge 1.5s var(--ease)}
  @keyframes mo-nudge{
    0%,100%{transform:translateY(calc(100% - var(--peek) - var(--safe-b)))}
    25%{transform:translateY(calc(100% - var(--peek) - var(--safe-b) - 26px))}
    45%{transform:translateY(calc(100% - var(--peek) - var(--safe-b)))}
    65%{transform:translateY(calc(100% - var(--peek) - var(--safe-b) - 12px))}
  }
  /* جای راهنما در برگه‌ی جمع‌شده */
  /* ⚠ روی ‎:root‎ (js/mirror-mobile.js: syncHint) نه روی خودِ برگه: پنل و دکمه‌ها
     بیرون از برگه‌اند و ‎--peek‎ را از ریشه می‌گیرند. */
  :root.sheet-hint{--peek:12rem}

  /* ------------------------------------------ ۳. پنلِ تنظیم روی آینه --- */
  .mo-panel{
    display:grid;gap:.55rem;
    position:absolute;z-index:6;left:.7rem;right:.7rem;
    bottom:calc(var(--peek) + var(--safe-b) + .6rem);
    padding:.55rem .75rem .7rem;border-radius:16px;gap:.35rem;
    /* نیمه‌شفاف روی آینه: صورت از پشتش پیداست؛ با لمس پررنگ می‌شود. */
    background:rgba(11,9,6,.34);
    -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
    border:1px solid rgba(201,160,99,.18);
    opacity:.82;transition:opacity .3s,background .3s;
    animation:mo-in .28s var(--ease);
  }
  .mo-panel.is-active{opacity:1;background:rgba(11,9,6,.6)}
  .mo-panel .mo-head b{font-size:.74rem;color:var(--bone-dim);font-weight:500}
  /* دایره‌ی دیدنی ۲۶ ولی ناحیه‌ی لمس ۴۴ پیکسل. */
  .mo-panel .mo-x{position:relative;width:26px;height:26px;font-size:.95rem}
  .mo-panel .mo-x::before{content:'';position:absolute;inset:-9px}
  .mo-panel .mo-chip{min-height:40px;padding:.38em .9em;font-size:.78rem}
  .mo-tune .tune{grid-template-columns:1fr 1fr;gap:.2rem .8rem}
  /* برچسبِ اسلایدر زیرِ ۱۱٫۵ پیکسل ناخواناست؛ اسلایدر ۴۰ پیکسل برای انگشت. */
  .mo-tune .tune label{font-size:.72rem;letter-spacing:0;color:var(--bone-dim)}
  .mo-tune input[type=range]{height:40px;touch-action:pan-y}
  /* فریمِ بچگانه: مرجعِ اندازه روی آینه (js/mirror-mobile.js). */
  .mo-ref:empty{display:none}
  .mo-ref .refpick{padding:.45rem .55rem;border-radius:12px;background:rgba(11,9,6,.35)}
  .mo-ref .refpick .ref-note,.mo-ref .refpick .ref-h{display:none}
  .mo-panel[hidden]{display:none}
  @keyframes mo-in{from{opacity:0;transform:translateY(10px)}}
  .mo-head{display:flex;align-items:center;justify-content:space-between}
  .mo-head b{font-size:.74rem;font-weight:600;color:var(--bone)}
  .mo-x{width:32px;height:32px;border-radius:50%;border:0;background:rgba(242,237,228,.08);
    color:var(--bone);font-size:1.1rem;line-height:1;cursor:pointer}
  .mo-env{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin:0 -.2rem;padding:0 .2rem .1rem}
  .mo-env::-webkit-scrollbar{display:none}
  .mo-chip{flex:none;padding:.5em .95em;border-radius:999px;cursor:pointer;
    border:1px solid rgba(201,160,99,.3);background:rgba(11,9,6,.4);color:var(--bone);
    font:inherit;font-size:.78rem;white-space:nowrap}
  .mo-chip[aria-pressed="true"]{background:var(--bronze);border-color:var(--bronze);color:#1A1209;font-weight:600}
  /* بازتاب‌ها حالا روی آینه‌اند؛ در برگه تکرار نمی‌شوند. */
  .panel .envpick{display:none}

  /* ------------------------------------------ ۴. نتیجه روی تصویر ------ */
  .mo-fit{
    display:block;position:absolute;z-index:5;top:.85rem;left:50%;transform:translateX(-50%);
    max-width:70%;padding:0 1em;border-radius:999px;cursor:pointer;
    font:600 .76rem/38px var(--body,system-ui);letter-spacing:0;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
    color:var(--bone);background:rgba(11,9,6,.55);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid rgba(201,160,99,.3);
    animation:mo-in .3s var(--ease);
  }
  .mo-fit[hidden]{display:none}
  .mo-fit::before{content:'';display:inline-block;width:.5em;height:.5em;border-radius:50%;
    margin-inline-end:.45em;vertical-align:.08em;background:var(--bronze)}
  .mo-fit[data-tone="good"]::before{background:#7FC08A}
  .mo-fit[data-tone="warn"]{border-color:rgba(210,116,63,.55)}
  .mo-fit[data-tone="warn"]::before{background:var(--warn)}
  .mo-fit.is-busy::before{animation:mo-blink 1s ease-in-out infinite}
  @keyframes mo-blink{50%{opacity:.25}}
}

/* لمس روی همه‌ی گوشی‌ها (ایستاده و خوابیده): مرجعِ اندازه و «جست‌وجو». */
@media(max-width:920px){
  .ref-ages button{min-height:40px;padding:.4em 1em;font-size:.78rem}
  /* ۱۶ پیکسل: کمتر از آن، آیفون روی فوکوس زوم می‌کند. */
  .ref-pd input{width:5.2rem;min-height:44px;font-size:16px}
  .refpick .ref-pd{font-size:.74rem}
  .refpick .ref-h{font-size:.74rem}
  .refpick .ref-note{font-size:.72rem}
  .refpick .ref-ask{font-size:.78rem}
  /* دکمه‌ی «جست‌وجو»: ناحیه‌ی لمس ۴۴؛ ‎margin‎ی منفی ارتفاعِ ردیف را عوض نمی‌کند
     (جای ‎--peek‎ ثابت می‌ماند). */
  .tray-link{min-height:44px;margin-block:-5px}
}

/* ۳۲۰ پیکسل: نوارِ بالا (برگشت + نشان + حساب + سبد، همه ‎nowrap‎) از عرضِ
   صفحه بیشتر بود؛ مرورگرِ گوشی کل صفحه را کوچک می‌کرد و دکمه‌ها جابه‌جا و
   ناقابلِ لمس می‌شدند. */
@media(max-width:380px){
  .bar{gap:.5rem;padding-inline:.7rem}
  .bar .back{padding-inline:.25rem;margin-inline-start:-.25rem;font-size:.62rem;letter-spacing:0}
  .bar .wordmark{flex:0 1 auto;min-width:0;width:72px}
  .bar .wordmark .mark,.bar .wordmark .mark svg{display:block;width:100%;height:auto}
}

@media(prefers-reduced-motion:reduce){
  .grip-hint svg,.sheet.is-nudge,.mo-fit.is-busy::before,.mo-panel,.mo-fit{animation:none!important}
}