/* Nova assistant demo — scoped under .app */
.app{
  --n-bg:#0c0a13;--n-side:#100d1a;--n-panel:#16121f;--n-panel2:#1d1829;--n-line:rgba(200,170,255,.12);--n-line2:rgba(200,170,255,.24);
  --n-ink:#f1ecfb;--n-ink2:#b3a9c9;--n-mute:#766c8c;--n-acc:#c084fc;--n-acc2:#f0abfc;--n-good:#4ade80;--n-warn:#fbbf24;
  position:relative;height:720px;overflow:hidden;color:var(--n-ink);font:400 14.5px/1.55 var(--body);
  background:radial-gradient(800px 400px at 70% -10%,rgba(192,132,252,.14),transparent 60%),var(--n-bg);
}
.app button{border:0;background:none;color:inherit;cursor:pointer}
.app [hidden]{display:none!important}
.app .n-orb{display:inline-block;width:26px;height:26px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 30%,#fff 0 6%,#f0abfc 18%,#c084fc 45%,#6d28d9 80%);box-shadow:0 0 18px rgba(192,132,252,.6)}
.app .n-orb.big{width:64px;height:64px;animation:norb 4s ease-in-out infinite}
@keyframes norb{50%{box-shadow:0 0 44px rgba(240,171,252,.8);transform:scale(1.04)}}

/* login */
.app .n-login{position:absolute;inset:0;display:grid;place-items:center;padding:20px;animation:nfade .4s}
.app .n-login.out{animation:nout .45s var(--ease) forwards}
@keyframes nfade{from{opacity:0}}
@keyframes nout{to{opacity:0;transform:scale(.97)}}
.app .n-login__card{width:min(400px,100%);padding:30px 26px 22px;border-radius:22px;background:linear-gradient(180deg,rgba(29,24,41,.92),rgba(22,18,31,.92));border:1px solid var(--n-line2);box-shadow:0 40px 100px -40px rgba(192,132,252,.5);text-align:center}
.app .n-login__card h2{margin-top:14px;font:700 24px var(--display);letter-spacing:-.03em}
.app .n-login__card>p{margin-top:4px;color:var(--n-ink2);font-size:13.5px}
.app .n-login form{margin-top:20px;display:grid;gap:12px;text-align:left}
.app .n-login label{display:grid;gap:5px}
.app .n-login label span{font:600 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--n-mute)}
.app .n-login input{height:44px;padding:0 13px;border-radius:12px;background:#0b0911;border:1px solid var(--n-line2);color:var(--n-ink);outline:0;font-size:14px;min-width:0}
.app .n-login input:focus{border-color:var(--n-acc)}
.app .n-primary{height:46px;border-radius:12px;font:700 15px var(--body);color:#1a0b2a!important;background:linear-gradient(135deg,var(--n-acc2),var(--n-acc))!important;box-shadow:0 14px 34px -14px rgba(192,132,252,.9);display:flex;align-items:center;justify-content:center;gap:8px;transition:filter .2s,transform .15s}
.app .n-primary:hover{filter:brightness(1.07)}
.app .n-primary:active{transform:scale(.98)}
.app .n-primary .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(26,11,42,.3);border-top-color:#1a0b2a;animation:nspin .7s linear infinite}
@keyframes nspin{to{transform:rotate(360deg)}}
.app .n-ghost{height:44px;border-radius:12px;font:600 14px var(--body);border:1px solid var(--n-line2)!important;display:flex;align-items:center;justify-content:center;gap:8px}
.app .n-ghost:hover{border-color:var(--n-acc)!important}
.app .n-demo-note{display:block;margin-top:14px;font:500 11px/1.5 var(--mono);color:var(--n-mute)}

/* workspace */
.app .n-ws{position:absolute;inset:0;display:grid;grid-template-columns:260px minmax(0,1fr);animation:nfade .5s}
.app .n-side{display:flex;flex-direction:column;gap:10px;padding:14px 12px;background:var(--n-side);border-right:1px solid var(--n-line);min-height:0}
.app .n-side__top{display:flex;align-items:center;justify-content:space-between}
.app .n-brand{display:flex;align-items:center;gap:9px;font:700 18px var(--display);letter-spacing:-.02em}
.app .n-new{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:11px;border:1px solid var(--n-line2)!important;font:600 13.5px var(--body)}
.app .n-new:hover{border-color:var(--n-acc)!important;background:rgba(192,132,252,.06)!important}
.app .n-side__h{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-mute);padding:6px 4px 0}
.app .n-convos{list-style:none;margin:0;padding:0;display:grid;gap:2px;overflow-y:auto;flex:1;min-height:0;align-content:start}
.app .n-convos button{width:100%;text-align:left;padding:9px 10px;border-radius:10px;min-height:40px;display:block}
.app .n-convos button:hover{background:rgba(200,170,255,.06)!important}
.app .n-convos button.on{background:rgba(192,132,252,.13)!important}
.app .n-convos b{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .n-convos small{display:block;font-size:11.5px;color:var(--n-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .n-session{border-top:1px solid var(--n-line);padding-top:12px;display:grid;gap:10px}
.app .n-user{display:flex;align-items:center;gap:10px}
.app .n-user b{display:block;font-size:13.5px}
.app .n-user small{display:block;font-size:11.5px;color:var(--n-mute)}
.app .n-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--mono);background:#2a2140;color:var(--n-acc2);flex:none}
.app .n-scopes{display:flex;flex-wrap:wrap;gap:4px}
.app .n-scopes span{font:600 9.5px var(--mono);padding:2px 6px;border-radius:5px;background:rgba(74,222,128,.1);color:#86efac}
.app .n-scopes span.no{background:rgba(251,113,133,.1);color:#fda4af}
.app .n-signout{height:36px;border-radius:10px;font:600 12.5px var(--body);color:var(--n-ink2);border:1px solid var(--n-line)!important}
.app .n-signout:hover{color:var(--n-ink);border-color:var(--n-line2)!important}

.app .n-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.app .n-head{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--n-line)}
.app .n-head__t{min-width:0;flex:1}
.app .n-head__t b{display:block;font:600 15px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .n-head__t small{display:flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--n-mute)}
.app .n-head__t small i{width:7px;height:7px;border-radius:50%;background:var(--n-good);box-shadow:0 0 8px var(--n-good)}
.app .n-pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;font:600 12.5px var(--body);border:1px solid var(--n-line2)!important;flex:none}
.app .n-pill:hover,.app .n-pill.on{border-color:var(--n-acc)!important;color:var(--n-acc2)}
.app .n-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--n-ink2);flex:none}
.app .n-icon:hover{background:rgba(200,170,255,.07)!important;color:var(--n-ink)}
.app .n-only-m{display:none}

.app .n-log{flex:1;overflow-y:auto;padding:22px 18px 10px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain;scroll-behavior:smooth}
.app .n-welcome{margin:auto 0;text-align:center;padding:20px 10px}
.app .n-welcome .n-orb{width:52px;height:52px}
.app .n-welcome h3{margin-top:14px;font:700 26px var(--display);letter-spacing:-.03em}
.app .n-welcome p{margin:6px auto 0;max-width:440px;color:var(--n-ink2);font-size:14px}

.app .n-msg{display:flex;gap:10px;max-width:760px;width:100%;animation:nin .3s var(--ease)}
@keyframes nin{from{opacity:0;transform:translateY(6px)}}
.app .n-msg.me{align-self:flex-end;justify-content:flex-end}
.app .n-msg.me .n-bub{background:linear-gradient(135deg,#6d28d9,#a21caf);color:#fff;border-radius:16px 16px 4px 16px;max-width:min(520px,85%)}
.app .n-msg .n-who{flex:none;width:28px;height:28px;margin-top:2px}
.app .n-msg .n-who .n-orb{width:28px;height:28px}
.app .n-msg .n-who .n-av{width:28px;height:28px;font-size:10px;background:#123524;color:#86efac}
.app .n-body{min-width:0;flex:1;display:grid;gap:8px;justify-items:start}
.app .n-name{font:600 11px var(--mono);color:var(--n-mute);letter-spacing:.04em}
.app .n-name em{font-style:normal;color:var(--n-good);margin-left:6px}
.app .n-bub{padding:10px 14px;border-radius:4px 16px 16px 16px;background:var(--n-panel);border:1px solid var(--n-line);overflow-wrap:anywhere;max-width:100%}
.app .n-bub b{color:#fff;font-weight:650}
.app .n-bub ul{margin:6px 0 2px;padding-left:18px}
.app .n-bub li{margin:2px 0}
.app .n-bub.stream::after{content:"";display:inline-block;width:7px;height:15px;margin-left:2px;vertical-align:-2px;background:var(--n-acc);animation:nblink .8s steps(2) infinite}
@keyframes nblink{50%{opacity:0}}
.app .n-acts{display:flex;gap:4px}
.app .n-acts button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:8px;font:500 11.5px var(--mono);color:var(--n-mute)}
.app .n-acts button:hover{color:var(--n-ink);background:rgba(200,170,255,.07)!important}

.app .n-typing{display:inline-flex;gap:4px;padding:14px 16px;border-radius:4px 16px 16px 16px;background:var(--n-panel);border:1px solid var(--n-line)}
.app .n-typing i{width:7px;height:7px;border-radius:50%;background:var(--n-acc);animation:ndot 1.1s infinite ease-in-out}
.app .n-typing i:nth-child(2){animation-delay:.15s}.app .n-typing i:nth-child(3){animation-delay:.3s}
@keyframes ndot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}

.app .n-tool{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(192,132,252,.06);border:1px solid rgba(192,132,252,.22);font-size:12.5px;max-width:100%}
.app .n-tool .ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;background:rgba(192,132,252,.16);color:var(--n-acc2)}
.app .n-tool .ic .spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(240,171,252,.3);border-top-color:var(--n-acc2);animation:nspin .7s linear infinite}
.app .n-tool.done .ic{background:rgba(74,222,128,.15);color:var(--n-good)}
.app .n-tool b{font-weight:600}
.app .n-tool code{font:500 11px var(--mono);color:var(--n-mute);display:block;overflow-wrap:anywhere}

.app .n-table{width:100%;max-width:560px;border-radius:12px;border:1px solid var(--n-line);overflow:hidden;background:var(--n-panel);animation:nin .3s}
.app .n-table__wrap{overflow-x:auto}
.app .n-table table{width:100%;border-collapse:collapse;font-size:12.5px}
.app .n-table th{text-align:left;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--n-mute);padding:8px 10px;background:var(--n-panel2);white-space:nowrap}
.app .n-table td{padding:8px 10px;border-top:1px solid var(--n-line);white-space:nowrap}
.app .n-table td.num{font-family:var(--mono);text-align:right}
.app .n-table tfoot td{font-weight:700;color:var(--n-acc2)}

.app .n-card{width:100%;max-width:520px;padding:12px 14px;border-radius:14px;background:var(--n-panel);border:1px solid var(--n-line2);animation:nin .3s}
.app .n-card h6{margin:0 0 8px;display:flex;align-items:center;gap:8px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--n-warn)}
.app .n-card h6.ok{color:var(--n-good)}
.app .n-card .to{font-size:12px;color:var(--n-mute);margin-bottom:6px}
.app .n-card .txt{padding:10px 12px;border-radius:10px;background:#0b0911;border:1px solid var(--n-line);font-size:13.5px;white-space:pre-wrap}
.app .n-card textarea{width:100%;min-height:110px;padding:10px 12px;border-radius:10px;background:#0b0911;border:1px solid var(--n-acc);color:var(--n-ink);font:400 13.5px/1.5 var(--body);resize:vertical;outline:0}
.app .n-card .btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.app .n-card .btns button{height:38px;padding:0 14px;border-radius:10px;font:600 13px var(--body)}
.app .n-card .go{background:linear-gradient(135deg,var(--n-acc2),var(--n-acc))!important;color:#1a0b2a!important}
.app .n-card .ed{border:1px solid var(--n-line2)!important}
.app .n-card .sent{display:flex;align-items:center;gap:8px;margin-top:10px;font:600 12.5px var(--body);color:var(--n-good)}
.app .n-deal{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.app .n-deal dt{color:var(--n-mute);font:500 11px var(--mono);padding-top:2px}
.app .n-deal dd{margin:0}
.app .n-steps{display:flex;gap:4px;margin-top:10px}
.app .n-steps span{flex:1;height:5px;border-radius:3px;background:rgba(200,170,255,.15)}
.app .n-steps span.on{background:linear-gradient(90deg,var(--n-acc),var(--n-acc2))}
.app .n-steplbl{display:flex;justify-content:space-between;font:500 9.5px var(--mono);color:var(--n-mute);margin-top:4px;gap:4px}
.app .n-docs{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}
.app .n-docs li{display:flex;gap:8px;align-items:center}
.app .n-docs li i{font-style:normal;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-size:11px;flex:none}
.app .n-docs li.y i{background:rgba(74,222,128,.18);color:var(--n-good)}
.app .n-docs li.n i{background:rgba(251,191,36,.15);color:var(--n-warn)}
.app .n-sys{align-self:center;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(200,170,255,.06);border:1px solid var(--n-line);font:500 11.5px var(--mono);color:var(--n-ink2);animation:nin .3s;text-align:center}
.app .n-sys.join{color:var(--n-good);border-color:rgba(74,222,128,.3)}
.app .n-sys .spin{width:11px;height:11px;border-radius:50%;border:2px solid rgba(200,170,255,.3);border-top-color:var(--n-acc2);animation:nspin .7s linear infinite}
.app .n-follow{display:flex;flex-wrap:wrap;gap:6px}

.app .n-chips{display:flex;gap:8px;padding:6px 18px 8px;overflow-x:auto;scrollbar-width:none}
.app .n-chips::-webkit-scrollbar{display:none}
.app .n-chip{flex:none;min-height:36px;padding:0 13px;border-radius:999px;font:500 13px var(--body);background:rgba(192,132,252,.08)!important;border:1px solid rgba(192,132,252,.28)!important;color:#e9d5ff;white-space:nowrap;transition:background .2s}
.app .n-chip:hover{background:rgba(192,132,252,.18)!important}
.app .n-chip:disabled{opacity:.45;cursor:default}
.app .n-compose{display:flex;align-items:flex-end;gap:8px;margin:0 18px;padding:8px 8px 8px 14px;border-radius:16px;background:var(--n-panel);border:1px solid var(--n-line2);transition:border-color .2s}
.app .n-compose:focus-within{border-color:var(--n-acc)}
.app .n-compose textarea{flex:1;min-width:0;resize:none;max-height:120px;padding:8px 0;background:none;border:0;outline:0;color:var(--n-ink);font:400 14.5px/1.45 var(--body)}
.app .n-compose textarea::placeholder{color:var(--n-mute)}
.app .n-send{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;color:#1a0b2a!important;background:linear-gradient(135deg,var(--n-acc2),var(--n-acc))!important;transition:opacity .2s,transform .15s}
.app .n-send:disabled{opacity:.35;cursor:default}
.app .n-send:active{transform:scale(.94)}
.app .n-foot{display:block;text-align:center;padding:6px 18px 10px;font:500 10.5px var(--mono);color:var(--n-mute)}

@media (max-width:760px){
  .app{height:min(720px,calc(100svh - 110px));min-height:560px}
  .app .n-ws{grid-template-columns:minmax(0,1fr)}
  .app .n-side{position:absolute;z-index:20;top:0;bottom:0;left:0;width:min(290px,86%);transform:translateX(-102%);transition:transform .32s var(--ease);box-shadow:30px 0 60px -20px rgba(0,0,0,.7)}
  .app .n-side.open{transform:none}
  .app .n-scrim{position:absolute;inset:0;z-index:15;background:rgba(5,3,10,.6)}
  .app .n-only-m{display:grid}
  .app .n-head{padding:10px 12px}
  .app .n-log{padding:16px 12px 8px}
  .app .n-chips{padding:6px 12px 8px}
  .app .n-compose{margin:0 12px}
  .app .n-pill span{display:none}
  .app .n-pill{width:36px;padding:0;justify-content:center}
  .app .n-msg.me .n-bub{max-width:88%}
}