/* 11-12 his ask: Explorer = every style as big cards, pick one or a few, chat pinned at the bottom hands it to the Agent */
.nvx{max-width:1180px;margin:0 auto;padding-bottom:150px}
.nvxhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.nvxhead .ttl{margin:0}.nvxhead .sub{margin:8px 0 0;color:var(--mute)}
.nvxfind{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);min-width:260px}
.nvxfind .ic{width:18px;height:18px;color:var(--mute);flex:none}
.nvxsearch{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:400 15px inherit;font-family:inherit}
.nvxgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.nvxm img[src*="how-ideas"]{object-fit:cover;object-position:left top}
.nvxc{display:flex;flex-direction:column;gap:6px}
.nvxc[hidden]{display:none}
.nvxm{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:18px;overflow:hidden;background:#0d0f1e;cursor:pointer;outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s,transform .15s}
.nvxm:hover{transform:translateY(-2px)}
.nvxm:focus-visible{outline-color:var(--ink)}
.nvxm video,.nvxm img{width:100%;height:100%;object-fit:cover;display:block}
.nvxc.on .nvxm{outline-color:var(--ink)}
.nvxtick{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(13,15,30,.55);border:1.5px solid rgba(255,255,255,.8);color:transparent;backdrop-filter:blur(6px)}
.nvxtick .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6}
.nvxc.on .nvxtick{background:#fff;color:#0d0f1e;border-color:#fff}
.nvxplay{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(13,15,30,.6);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(6px)}
.nvxc h3{margin:8px 2px 0;font-size:16px;font-weight:600}
.nvxc p{margin:0 2px;font-size:14px;line-height:1.45;color:var(--mute)}
.nvxnone{color:var(--mute);margin:24px 0}
.nvxbar{position:fixed;bottom:24px;left:calc(50% + var(--nvx-side,138px));transform:translateX(-50%);width:min(720px,calc(100vw - var(--nvx-side,138px)*2 - 48px));display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:20px;background:var(--panel2);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);z-index:20}
.nvxchips{display:flex;flex-wrap:wrap;gap:8px}.nvxchips[hidden]{display:none}
.nvxchip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--hover);color:var(--ink);font:600 13px inherit;font-family:inherit;cursor:pointer}
.nvxchip span{color:var(--mute);font-size:16px;line-height:1}
.nvxrow{display:flex;align-items:center;gap:10px}
.nvxrow textarea{flex:1;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font:400 16px/1.4 inherit;font-family:inherit;padding:10px 6px;min-height:24px}
.nvxrow textarea::placeholder{color:var(--mute)}
.nvxgo{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--ink);color:var(--bg);cursor:pointer}
.nvxgo .ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}
.shell.mini{--nvx-side:36px}
@media (max-width:900px){
  .nvxhead{flex-direction:column;align-items:stretch}.nvxfind{min-width:0}
  .nvxgrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .nvxbar{left:50%;width:calc(100vw - 24px);bottom:12px}
}
/* 11-14 his ask: the Explore box looked ugly. Now the agent's composer: picked styles as thumbnails, a big box, product + count + Start */
.nvxbar{width:min(780px,calc(100vw - var(--nvx-side,138px)*2 - 48px));gap:8px;padding:14px 14px 12px;border-radius:24px;background:linear-gradient(180deg,#141414,#0C0C0C);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.nvxbar>textarea{width:100%;resize:none;border:0;outline:0;background:transparent;color:#fff;font:400 16px/1.45 inherit;font-family:inherit;padding:6px 6px 4px;min-height:52px}
.nvxbar>textarea::placeholder{color:#8A8A8A}
.nvxchip{height:40px;padding:0 10px 0 4px;gap:8px;background:#1A1A1A;border:1px solid rgba(255,255,255,.12);color:#fff;font-weight:500}
.nvxchip img{width:32px;height:32px;border-radius:8px;object-fit:cover}
.nvxchip .nvxx{color:#8A8A8A;font-size:16px}
.nvxtools{display:flex;align-items:center;gap:10px;min-width:0}
.nvxtools .r{margin-left:auto;display:flex}
.nvxprod{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border-radius:999px;background:#1A1A1A;border:1px solid rgba(255,255,255,.1);color:#EDEDED;font-size:13px;max-width:46%;min-width:0}
.nvxprod>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nvxprod img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.nvxprod .ic{width:16px;height:16px;margin-left:4px}
.nvxcnt{font-size:13px;color:#8A8A8A;white-space:nowrap}
.nvxgo{width:auto;height:42px;padding:0 18px 0 14px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;font:600 15px inherit;font-family:inherit;background:#fff;color:#000}
.nvxgo .ic{width:18px;height:18px}
@media (max-width:600px){.nvxcnt{display:none}.nvxprod{max-width:60%}.nvxbar>textarea{min-height:44px}}
.nvxbar>textarea,.nvxbar>textarea:focus{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}
.nvxbar .nvxgo{background:#fff!important;color:#000!important}
.nvxchip{font-size:14px!important}
@media (max-width:900px){.nvxbar{left:50%;width:calc(100vw - 24px);bottom:12px}}
html[data-theme="dark"] body .nvxbar .nvxgo{background-color:#fff!important;color:#000!important}
html[data-theme="dark"] body .nvxbar .nvxchip,html[data-theme="dark"] body .nvin .nvgoal button:not([aria-pressed=true]){background-color:#1A1A1A!important;color:#EDEDED!important}
html[data-theme="dark"] body .nvin .nvgoal button[aria-pressed=true]{background-color:#fff!important;color:#000!important}
/* 11-14 his ask: "too centered, too small, spread out, bigger, wider" */
@media (min-width:1100px){
  .nvx{max-width:min(1760px,calc(100vw - 112px))!important}
  .nvxhead{margin-bottom:36px}
  .nvxhead .ttl{font-size:56px!important;letter-spacing:-.035em;line-height:1.02}
  .nvxhead .sub{font-size:18px}
  .nvxgrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;gap:28px 22px!important}
  .nvxbar{width:min(960px,calc(100vw - 160px))!important;left:50%!important}
}