/* np-motion.css — Nopla safe motion (hotfix) — no layout breaking, no hidden content */
:root{
  --np-ease-spring: cubic-bezier(.16, 1, .3, 1);
  --np-ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --np-dur-xs: 140ms;
  --np-dur-sm: 220ms;
  --np-dur-md: 340ms;
  --np-dur-lg: 480ms;
}

/* scroll */
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* theme soft — not blocking */
html.theme-transitioning{
  transition: background-color var(--np-dur-md) var(--np-ease-smooth), color var(--np-dur-md) var(--np-ease-smooth) !important;
}
html.theme-transitioning body,
html.theme-transitioning .dashboard-sidebar,
html.theme-transitioning .dashboard-main,
html.theme-transitioning .np-nav,
html.theme-transitioning .composer,
html.theme-transitioning button,
html.theme-transitioning input,
html.theme-transitioning textarea,
html.theme-transitioning select{
  transition: background-color var(--np-dur-md) var(--np-ease-smooth),
              border-color var(--np-dur-md) var(--np-ease-smooth),
              color var(--np-dur-md) var(--np-ease-smooth),
              box-shadow var(--np-dur-md) var(--np-ease-smooth) !important;
}

/* panel fade only — no absolute, no contain, no display override */
@keyframes npPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel-section.active{animation: npPanelIn var(--np-dur-md) var(--np-ease-spring) both}
.panel-section.is-leaving,
.panel-section.is-entering{animation: none}

/* auth steps */
.soft-ui-auth .step.active{animation: npPanelIn var(--np-dur-md) var(--np-ease-spring) both}

/* overlay polish */
.model-dropdown-panel{transform-origin:top center; transition: opacity var(--np-dur-sm) var(--np-ease-spring), transform var(--np-dur-sm) var(--np-ease-spring)}
.model-dropdown:not(.open) .model-dropdown-panel{opacity:0;transform:translateY(-6px) scale(.98);visibility:hidden;pointer-events:none}
.model-dropdown.open .model-dropdown-panel{opacity:1;transform:none;visibility:visible}
.purchase-overlay{animation: npPanelIn var(--np-dur-sm) var(--np-ease-smooth) both}
.gen-lightbox{animation: npPanelIn var(--np-dur-sm) var(--np-ease-smooth) both}

/* showcase device transition kept but lightweight */
.np-shot-device{transition: width var(--np-dur-lg) var(--np-ease-spring), padding var(--np-dur-lg) var(--np-ease-spring), border-radius var(--np-dur-lg) var(--np-ease-smooth)}
.np-shot-screen{transition: aspect-ratio var(--np-dur-lg) var(--np-ease-spring)}

/* fullscreen expand */
.np-shot-full{
  position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;
  padding:max(18px,2vw);
  background:rgba(2,8,16,.78);
  backdrop-filter:blur(14px) saturate(1.12); -webkit-backdrop-filter:blur(14px) saturate(1.12);
  opacity:0;pointer-events:none;transition: opacity var(--np-dur-md) var(--np-ease-smooth);
}
.np-shot-full.is-open{opacity:1;pointer-events:auto}
.np-shot-full-frame{
  position:relative;width:min(1180px,96vw);max-height:92vh;
  background:var(--card, #0c1c2e);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(56,189,248,.18);
  transform:translateY(10px) scale(.96);
  transition: transform var(--np-dur-lg) var(--np-ease-spring), opacity var(--np-dur-md) var(--np-ease-smooth);
  will-change:transform;
}
.np-shot-full.is-open .np-shot-full-frame{transform:none}
.np-shot-full-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid rgba(56,189,248,.12);
  background:var(--card, #0c1c2e);
}
.np-shot-full-title{font-size:13px;font-weight:800;color:var(--text,#f4f7fb);display:flex;align-items:center;gap:8px}
.np-shot-full-title .ti{color:var(--accent,#38bdf8)}
.np-shot-full-close{
  width:38px;height:38px;border-radius:11px;border:1px solid rgba(56,189,248,.14);
  background:rgba(56,189,248,.08);color:var(--text,#f4f7fb);cursor:pointer;display:grid;place-items:center;
}
.np-shot-full-close:hover{background:var(--accent,#38bdf8);color:#fff}
.np-shot-full-body{position:relative;aspect-ratio:16/10;max-height:78vh;overflow:hidden;background:rgba(56,189,248,.06)}
.np-shot-full-body img{width:100%;height:100%;object-fit:contain;object-position:center top;display:block}
.np-shot-expand{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;
  border-radius:999px;border:1px solid rgba(56,189,248,.18);
  background:rgba(12,28,46,.92);color:var(--text,#f4f7fb);font-size:12.5px;font-weight:800;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.35);cursor:pointer;backdrop-filter:blur(10px);
}
.np-shot-expand:hover{background:var(--accent,#38bdf8);color:#fff}
.np-shot-screen{position:relative}
@media(max-width:640px){.np-shot-expand{top:8px;inset-inline-end:8px;min-height:34px;font-size:12px}}

/* shimmer — visual only, never hides real content */
@keyframes npShimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
.np-shimmer{
  background: linear-gradient(90deg, rgba(56,189,248,.08) 25%, rgba(56,189,248,.16) 37%, rgba(56,189,248,.08) 63%);
  background-size:420px 100%; animation: npShimmer 1.35s linear infinite; border-radius:12px;
}
html[data-theme=light] .np-shimmer{ background: linear-gradient(90deg, #d4dae3 25%, #e4e8ee 37%, #d4dae3 63%); background-size:420px 100% }
.np-skeleton{display:none; gap:12px; padding:6px 2px}
.np-skeleton.is-visible{display:grid}
.np-skeleton-avatar{width:42px;height:42px;border-radius:50%}
.np-skeleton-line{height:12px;border-radius:999px}
.np-skeleton-line.w60{width:60%}.np-skeleton-line.w80{width:80%}.np-skeleton-line.w100{width:100%}.np-skeleton-line.w40{width:40%}
.np-skeleton-card{height:94px;border-radius:16px}
.np-skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.np-skeleton-list{display:grid;gap:10px}
/* Model catalog skeleton deliberately uses the catalog's own grid/card geometry. */
.np-models-skeleton{padding:0!important}
.np-models-skeleton.is-visible{display:block!important}
.np-models-skeleton>.models-catalog-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.np-skeleton-model-card{box-sizing:border-box;min-height:168px;padding:16px;border-radius:8px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.np-skeleton-model-card .model-card-head{display:flex;align-items:center;gap:14px;min-width:0}
.np-skeleton-model-card .model-card-head .np-skeleton-line{height:14px;flex:1}
.np-skeleton-model-logo{display:block;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:rgba(148,163,184,.18)}
.np-skeleton-model-card .model-card-meta{display:flex;align-items:center;gap:10px;min-height:18px}
.np-skeleton-model-card .model-card-meta .np-skeleton-line{height:10px;flex:0 1 72px}
.np-skeleton-model-card .coin-package-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;min-height:30px}
.np-skeleton-model-card .coin-package-footer .np-skeleton-line{height:12px;flex:0 1 64px}
.np-skeleton-model-button{display:block;flex:0 0 92px;width:92px;height:30px;border-radius:9px;background:rgba(148,163,184,.18)}
html[data-theme=light] .np-skeleton-model-logo,html[data-theme=light] .np-skeleton-model-button{background:rgba(148,163,184,.45)}
/* safe host — no visibility:hidden on children */
.np-skeleton-host{position:relative}
.np-loadbar{
  position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:9999;
  background:transparent;pointer-events:none;overflow:hidden;opacity:0;transition:opacity var(--np-dur-xs) var(--np-ease-smooth)
}
.np-loadbar.is-on{opacity:1}
.np-loadbar i{display:block;height:100%;width:38%;background:var(--accent-gradient, linear-gradient(90deg,#38bdf8,#22d3ee));border-radius:999px;transform:translateX(-100%);animation: npLoadSlide 1.1s var(--np-ease-smooth) infinite}
@keyframes npLoadSlide{0%{transform:translateX(-100%)}50%{transform:translateX(60vw)}100%{transform:translateX(140vw)}}
html[dir=rtl] .np-loadbar i{animation-name: npLoadSlideR}
@keyframes npLoadSlideR{0%{transform:translateX(100%)}50%{transform:translateX(-60vw)}100%{transform:translateX(-140vw)}}

/* ---- route gate shimmer (کل سایت هنگام لود اولیه شیمر — نه لودینگ اسپینر) ---- */
.route-gate-loader{
  display:none;
  position:fixed; inset:0; z-index:9999;
  align-items:stretch; justify-content:stretch;
  background: var(--bg-base, #07131f);
  padding: 0;
  overflow:hidden;
}
html.pre-auth .route-gate-loader{ display:flex !important; }
.route-gate-loader .rg-spin{ display:none !important; }
.np-gate-shimmer{
  flex:1; display:flex; flex-direction:column; gap:16px;
  padding: 14px; max-width:1180px; width:100%; margin:0 auto;
}
.np-gate-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 2px 10px; border-bottom:1px solid rgba(125,130,150,.10)}
.np-gate-top-left,.np-gate-top-right{ display:flex; align-items:center; gap:10px}
.np-gate-body{ display:flex; gap:16px; flex:1; min-height:0}
.np-gate-sidebar{
  width:260px; flex:0 0 260px; display:flex; flex-direction:column; gap:10px;
  padding:12px; border-radius:18px; border:1px solid rgba(125,130,150,.08);
  background: color-mix(in srgb, var(--card, #0c1c2e) 88%, transparent);
}
.np-gate-main{ flex:1; display:flex; flex-direction:column; gap:12px; min-width:0}
.np-gate-card{ border-radius:18px; border:1px solid rgba(125,130,150,.08); background: color-mix(in srgb, var(--card, #0c1c2e) 88%, transparent); padding:14px; }
@media(max-width:900px){
  .np-gate-sidebar{ display:none }
  .np-gate-shimmer{ padding:10px }
}
html[data-theme=light] .route-gate-loader{ background: var(--bg-base, #f4f7f9) }
html[data-theme=light] .np-gate-sidebar,
html[data-theme=light] .np-gate-card{ background:#fff; border-color:#e6ebf2}

/* Dashboard gate: mirror the real dashboard shell instead of showing a generic
   centered card layout. The grid is the same RTL shell and the placeholders
   use the same sidebar, topbar, hero, and composer geometry as the real view. */
 .np-gate-dashboard-shell{position:absolute;inset:0;display:grid;grid-template-columns:var(--sidebar-w,282px) minmax(0,1fr);direction:inherit;min-height:100vh;width:100%;overflow:hidden;background:var(--bg-base,#07131f)}
 html[dir=rtl] .np-gate-dashboard-shell{direction:rtl}
 html[dir=ltr] .np-gate-dashboard-shell{direction:ltr}
 html[dir=rtl] .np-gate-dashboard-shell{grid-template-columns:316px minmax(0,1fr)}
 html[dir=ltr] .np-gate-dashboard-shell{grid-template-columns:316px minmax(0,1fr)}
 .np-gate-dashboard-sidebar{grid-column:1;align-self:start;display:flex;flex-direction:column;gap:8px;width:286px;height:calc(100vh - 42px);min-width:0;box-sizing:border-box;margin-inline-start:12px;margin-block-start:18px;margin-block-end:24px;padding:12px;border:1px solid rgba(148,163,184,.16);border-radius:24px;background:transparent;box-shadow:none;overflow:hidden}
 html[dir=rtl] .np-gate-dashboard-sidebar{margin-inline-start:10px}
.np-gate-dashboard-main{grid-column:2;display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden;background:var(--bg-base,#07131f)}
 .np-gate-account{display:flex;align-items:center;gap:10px;min-height:62px;padding:9px 11px;border:1px solid rgba(148,163,184,.14);border-radius:16px;box-sizing:border-box;background:transparent}
.np-gate-account-avatar{display:block;flex:0 0 42px;width:42px;height:42px;border-radius:13px}
.np-gate-account-copy{display:grid;gap:7px;min-width:0;flex:1}
.np-gate-account-copy .np-shimmer:first-child{display:block;width:82px;height:13px;border-radius:999px}
.np-gate-account-copy .np-shimmer:last-child{display:block;width:58px;height:10px;border-radius:999px;opacity:.82}
.np-gate-account-caret{display:block;flex:0 0 16px;width:16px;height:16px;border-radius:5px;opacity:.7}
 .np-gate-recent{display:flex;align-items:center;gap:10px;width:100%;height:50px;margin:10px 0 12px;padding:7px;border-radius:11px;box-sizing:border-box}
.np-gate-recent-icon{display:block;flex:0 0 36px;width:36px;height:36px;border-radius:8px}
.np-gate-recent-line{display:block;flex:1;min-width:0;height:11px;border-radius:999px}
.np-gate-recent-caret{display:block;flex:0 0 16px;width:16px;height:16px;border-radius:5px;opacity:.6}
 .np-gate-section-label{height:15px;margin:13px 5px 6px;display:flex;align-items:center}
.np-gate-section-label .np-shimmer{display:block;width:74px;height:10px;border-radius:999px;opacity:.7}
 .np-gate-sidebar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:1px 0 6px}
 .np-gate-sidebar-card{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:7px;min-height:58px;padding:8px 9px;border-radius:16px;box-sizing:border-box}
.np-gate-sidebar-icon{display:block;flex:0 0 34px;width:34px;height:34px;border-radius:11px}
.np-gate-sidebar-line{display:block;flex:1;min-width:0;width:auto;height:11px;border-radius:999px}
 .np-gate-sidebar-links{display:grid;gap:6px}
 .np-gate-sidebar-link{display:flex;align-items:center;gap:7px;width:100%;height:48px;padding:5px 7px;border-radius:11px;box-sizing:border-box}
.np-gate-sidebar-link .np-gate-sidebar-icon{flex:0 0 38px;width:38px;height:38px;border-radius:12px}
.np-gate-sidebar-link .np-gate-sidebar-line{flex:1;width:auto;height:11px}
.np-gate-sidebar-arrow{display:block;flex:0 0 28px;width:28px;height:28px;border-radius:9px;opacity:.8}
 .np-gate-main-topbar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;height:76px;min-height:76px;padding:14px 76px 14px 0;box-sizing:border-box;background:linear-gradient(180deg,var(--bg-base,#07131f) 60%,transparent 100%)}
 html[dir=rtl] .np-gate-main-topbar{padding:14px 76px}
  .np-gate-topbar-subscription{position:absolute;inset-inline-start:72px;inset-block-start:18px;display:block;width:167px;height:48px;border-radius:15px}
  html[dir=rtl] .np-gate-topbar-subscription{width:160px}
  .np-gate-topbar-bell{position:absolute;inset-inline-start:14px;inset-block-start:18px;display:block;width:48px;height:48px;border-radius:19px}
 .np-gate-topbar-model{grid-column:2;justify-self:center;display:block;width:180px;height:48px;border-radius:14px}
 .np-gate-topbar-spacer{grid-column:3;display:block;width:1px;height:1px}
  .np-gate-chat{width:auto;max-width:none;flex:1 1 auto;min-height:0;margin-block-start:6px;margin-inline-start:42px;margin-inline-end:20px;padding:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
 .np-gate-hero{display:flex;flex:0 0 150px;flex-direction:column;align-items:center;justify-content:center;width:100%;height:150px;min-height:0;margin:0 0 10px;padding:0 16px;box-sizing:border-box;gap:18px}
.np-gate-hero-icon{display:block;width:56px;height:56px;border-radius:18px}
.np-gate-hero-title{display:block;width:248px;height:28px;margin-bottom:28px;border-radius:999px}
  .np-gate-composer-wrap{flex:0 0 auto;width:690px;max-width:100%;margin-inline:auto;padding:6px 0 4px;box-sizing:border-box}
.np-gate-composer{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:9px;width:100%;min-height:80px;padding:10px 12px;border-radius:28px;box-sizing:border-box}
.np-gate-composer-row{display:flex;align-items:center;gap:10px;width:100%}
.np-gate-composer-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.np-gate-composer-footline{display:block;width:132px;height:11px;border-radius:999px;opacity:.62}
.np-gate-composer-footline-sm{width:58px}
.np-gate-composer-line{display:block;flex:1;min-width:0;height:14px;border-radius:999px}
.np-gate-composer-action{display:block;flex:0 0 38px;width:38px;height:38px;border-radius:12px;opacity:.9}
 .np-gate-composer-hint{display:block;width:100%;height:15px;margin:5px auto 0;border-radius:999px;opacity:.58}
 .np-gate-floating-tools{position:fixed;inset-block-start:18px;left:18px;right:auto;z-index:2;display:flex;align-items:center;gap:10px}
 html[dir=ltr] .np-gate-floating-tools{left:auto;right:18px}
 .np-gate-floating-tools .np-gate-new-chat{order:0}
 .np-gate-floating-tools .np-gate-theme-toggle{order:1}
.np-gate-theme-toggle{display:block;width:48px;height:48px;border-radius:19px}
.np-gate-new-chat{display:block;width:138px;height:48px;border-radius:19px}
html[data-theme=light] .np-gate-dashboard-shell{background:var(--bg-base,#f4f7f9)}
 html[data-theme=light] .np-gate-dashboard-sidebar{background:#fff;border-color:rgba(148,163,184,.22);box-shadow:none}
 html[data-theme=light] .np-gate-account{background:transparent;border-color:rgba(148,163,184,.26)}
@media(max-width:1024px){
  .np-gate-dashboard-shell{display:block}
  .np-gate-dashboard-sidebar{display:none}
  .np-gate-dashboard-main{width:100%}
  .np-gate-main-topbar,html[dir=rtl] .np-gate-main-topbar,html[dir=ltr] .np-gate-main-topbar{height:60px;min-height:60px;padding:9px 10px;grid-template-columns:44px minmax(0,1fr) 44px}
   .np-gate-topbar-subscription,html[dir=rtl] .np-gate-topbar-subscription{position:static;width:44px;height:42px;justify-self:center;border-radius:50%}
  .np-gate-topbar-bell{display:none}
  .np-gate-topbar-model{width:100%;height:42px;border-radius:14px}
  .np-gate-floating-tools{inset-block-start:9px;left:10px;right:auto}
  .np-gate-theme-toggle{width:42px;height:42px}
  .np-gate-new-chat{display:none}
}
@media(max-width:640px){
   .np-gate-chat{margin-inline:10px}
  .np-gate-composer{height:92px}
  .np-gate-hero-title{width:210px}
}

/* ---- landing / login / support initial shimmer (صفحه‌هایی که pre-auth ندارند) ---- */
.np-initial-shimmer{
  position:fixed; inset:0; z-index:9998;
  background: var(--bg, #06111d);
  display:flex; flex-direction:column; gap:0;
  pointer-events:none; opacity:0; visibility:hidden;
  transition: opacity .22s ease, visibility .22s ease;
  overflow:hidden;
}
html.np-loading .np-initial-shimmer{ opacity:1; visibility:visible; pointer-events:auto}
.np-initial-shimmer-inner{
  width:min(1180px,100%); margin:0 auto; flex:1; display:flex; flex-direction:column; gap:18px; padding: 14px 16px 20px;
}
.np-initial-shimmer-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 12px; border-bottom:1px solid rgba(125,130,150,.08)}
.np-initial-shimmer-hero{ display:grid; gap:12px; padding:18px; border-radius:20px; border:1px solid rgba(125,130,150,.08); background: color-mix(in srgb, var(--card, #0c1c2e) 88%, transparent)}
.np-initial-shimmer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.np-initial-shimmer-grid > div{ height:110px; border-radius:16px}
@media(max-width:900px){ .np-initial-shimmer-grid{ grid-template-columns:1fr} }
html[data-theme=light] .np-initial-shimmer{ background: #edf7fb }
html[data-theme=light] .np-initial-shimmer-hero{ background:#fff; border-color:#e6ebf2}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .np-shimmer{animation:none !important}
}