/* ================================================================ phone & tablet — Naseeh stays in sight, results glide in and out */
#miniNaseeh{display:none}
@media (max-width:1099px){
  .result,#answer,#panel,#stage{scroll-margin-top:12px}
  #miniNaseeh{display:block;position:fixed;left:14px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:70;width:66px;height:66px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;
    opacity:0;transform:translateY(16px) scale(.7);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.3,1.3)}
  #miniNaseeh.on{opacity:1;transform:none;pointer-events:auto}
  #miniNaseeh .mn-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 10px 28px rgba(10,59,120,.35);background:#EAF2FD}
  #miniNaseeh img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;transform:scale(1.55);transform-origin:50% 22%}
  #miniNaseeh .mn-ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(10,116,240,.35)}
  #miniNaseeh .mn-st{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);white-space:nowrap;font:600 10px/1 'Plex Arabic',Tahoma,sans-serif;color:#fff;background:#0A3B78;border-radius:20px;padding:4px 8px;box-shadow:0 4px 10px rgba(10,59,120,.25)}
  #miniNaseeh[data-state="speaking"] .mn-ring{border-color:#0DB89B;animation:mnTalk 1s ease-in-out infinite}
  #miniNaseeh[data-state="speaking"] .mn-st{background:#0DB89B}
  #miniNaseeh[data-state="listening"] .mn-ring{border-color:#0A74F0;animation:mnTalk 1.6s ease-in-out infinite}
  #miniNaseeh[data-state="thinking"] .mn-ring{border-color:#F2A10C;border-style:dashed;animation:mnSpin 2.4s linear infinite}
  #miniNaseeh[data-state="thinking"] .mn-st{background:#C27F00}
  @keyframes mnTalk{50%{transform:scale(1.12);opacity:.55}}
  @keyframes mnSpin{to{transform:rotate(360deg)}}
}
@media (max-width:600px){
  #miniNaseeh{bottom:calc(80px + env(safe-area-inset-bottom));width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){ #miniNaseeh .mn-ring{animation:none!important} }
.rail .logo-img{max-width:100%}
@media (max-width:800px){ .rail .brand .logo-img{width:52px} }