/* Nobody: the brand layer over the dashboard.
Backgrounds are only black or white. Lime lives in the ghost and the primary action. */
:root {
--bg: #0A0A0A; --panel: rgba(16,16,16,.78); --surface: #121212; --surface-opaque: #111;
--ink: #F2F2EE; --ink-2: #96968F; --ink-th: #96968F;
--accent: #C8F169; --accent-dark: #2B3A12; --accent-ink: #0A0A0A; --accent-text: #C8F169;
--lime: #C8F169;
--font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { font-family: var(--font); }
h1, h2, .title { font-family: "Bricolage Grotesque", var(--font); letter-spacing: -0.025em; }
::selection { background: var(--lime); color: #0A0A0A; }
.chatlist { align-content: start; }
.mini-av { color: var(--bg) !important; }
/* ---------- the ghost ---------- */
.nb-g { display: inline-block; color: var(--lime); }
.nb-g svg { width: 100%; height: 100%; display: block; }
.nb-logo { display: flex; align-items: center; gap: 9px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 25px; letter-spacing: -0.045em; color: var(--ink); line-height: 1; text-decoration: none; }
.nb-logo .nb-g { width: 28px; height: 28px; }
#meAv { background: var(--lime) !important; display: flex; align-items: center; justify-content: center; }
#meAv .nb-g { width: 22px; height: 22px; color: #0A0A0A; }
.banner .nb-g { width: 18px; height: 18px; }
.me { position: relative; }
@keyframes nbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* Empty chat: the big ghost whose eyes follow you. */
.nb-empty { text-align: center; padding: 8vh 0 18px; }
.nb-empty .nb-big { width: 112px; height: 112px; color: var(--lime); animation: nbFloat 3.2s ease-in-out infinite; filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--lime) 12%, transparent)); }
.nb-empty h2 { font-size: 36px; line-height: 40px; margin: 14px 0 6px; font-weight: 800; letter-spacing: -0.045em; }
/* The ghost rides the end of a streaming reply. */
.caret::after { content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; background: var(--lime); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: nbFloat 1.2s ease-in-out infinite; }
/* ---------- locked features ---------- */
.nav.lock { color: #5d5d58; cursor: default; }
.nav.lock i { color: #4a4a46; }
.nav.lock .soon { margin-left: auto; font: 500 10.5px var(--mono); color: #7a7a73; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
/* ---------- the ghost's pay card (in the thread) ---------- */
.nb-pay { border: 1px solid color-mix(in srgb, var(--lime) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 6%, transparent), transparent); border-radius: 18px; padding: 20px 22px; display: grid; grid-template-columns: 56px 1fr; gap: 16px; margin: 6px 0; }
.nb-pay .nb-g { width: 52px; height: 52px; }
.nb-pay h4 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.nb-pay p { font-size: 14px; color: #c9c9c2; line-height: 1.55; }
.nb-pay .acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.nb-pay .pb { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; font: 600 14px var(--font); border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.nb-pay .pb.pri { background: var(--lime); color: #0A0A0A; border-color: var(--lime); }
.nb-pay .pb.dash { border-style: dashed; color: var(--ink-2); }
.nb-pay .pb[disabled] { opacity: .55; cursor: wait; }
.nb-pay .amts { display: flex; gap: 6px; margin-right: 6px; }
.nb-pay .amt { height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 600 13px var(--font); cursor: pointer; }
.nb-pay .amt.on { border-color: var(--lime); color: var(--ink); }
.nb-pay .fine { font-size: 12px; color: #76766f; margin-top: 10px; }
.nb-pay .qr { display: grid; grid-template-columns: 150px 1fr; gap: 16px; margin-top: 14px; align-items: center; }
.nb-pay .qr svg { width: 150px; height: 150px; background: #fff; border-radius: 10px; padding: 8px; }
.nb-pay .qr code { font: 500 12px var(--mono); word-break: break-all; color: var(--ink); }
/* ---------- landing (the front door) ---------- */
#nbLanding { position: fixed; inset: 0; z-index: 60; background: #0A0A0A; overflow-y: auto; color: var(--ink); }
#nbLanding[hidden] { display: none; }
.nbl-nav { position: sticky; top: 0; height: 72px; display: flex; align-items: center; padding: 0 40px; gap: 28px; background: rgba(10,10,10,.85); backdrop-filter: blur(8px); z-index: 2; }
.nbl-nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.nbl-nav a:hover { color: var(--ink); }
.nbl-nav .grow { flex: 1; }
.nbl-pill { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--ink-2); }
.nbl-hero { min-height: calc(100vh - 72px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px 80px; position: relative; }
.nbl-hero .nb-big { width: 120px; height: 120px; color: var(--lime); filter: drop-shadow(0 22px 40px color-mix(in srgb, var(--lime) 14%, transparent)); animation: nbEnter 1.4s cubic-bezier(.2,.8,.2,1) both, nbFloat 3.4s ease-in-out 1.4s infinite; }
@keyframes nbEnter { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
.nbl-hero h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(48px, 7vw, 88px); line-height: .95; letter-spacing: -0.045em; margin: 22px 0 14px; }
.nbl-sub { color: var(--ink-2); font-size: 17px; margin-bottom: 34px; }
#nbBox { width: min(720px, 100%); }
.nbl-box { width: 100%; background: #121212; border: 1px solid var(--line); border-radius: 20px; padding: 16px 16px 12px; text-align: left; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.nbl-box:focus-within { border-color: color-mix(in srgb, var(--lime) 45%, transparent); }
.nbl-box textarea { width: 100%; background: transparent; border: 0; outline: 0; resize: none; color: var(--ink); font: 400 17px/1.5 var(--font); min-height: 30px; }
.nbl-box textarea::placeholder { color: var(--ink-2); }
.nbl-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.nbl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; }
.nbl-send { margin-left: auto; width: 38px; height: 38px; border-radius: 11px; background: var(--lime); color: #0A0A0A; border: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.nbl-fine { margin-top: 16px; color: #6d6d67; font-size: 12.5px; }
@media (max-width: 760px) { .nbl-nav { padding: 0 16px; gap: 14px; } .nbl-nav a { display: none; } }
/* The morph: landing fades while the prompt box travels into the composer. */
#nbLanding.leaving { animation: nbFade .38s ease forwards; }
@keyframes nbFade { to { opacity: 0; } }
.nb-fly { position: fixed; z-index: 70; background: #121212; border: 1px solid color-mix(in srgb, var(--lime) 45%, transparent); border-radius: 20px; transition: all .38s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.app.nb-arrive .nb-empty, .app.nb-arrive .models { visibility: hidden; }
.app.nb-arrive .side { animation: nbSlide .38s cubic-bezier(.2,.8,.2,1); }
@keyframes nbSlide { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ---------- landing controls: model picker and Tor ---------- */
#nbLanding .mp-btn { height: 32px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0 10px 0 6px; display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--font); cursor: pointer; max-width: 300px; }
#nbLanding .mp-btn .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbl-tor { cursor: pointer; background: transparent; font: 500 13px var(--font); }
.nbl-tor .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.nbl-tor[aria-pressed="false"] .dot { background: #5d5d58; box-shadow: none; }
.nbl-tor[aria-pressed="false"] { color: var(--ink-2); }
.mp { z-index: 90 !important; } .mp-card { z-index: 91 !important; }
/* ---------- moving background, black first ---------- */
#nbBg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
#nbBg.on { opacity: 1; }
#nbLanding > nav, #nbLanding > section { position: relative; z-index: 1; }
.nbl-nav { background: rgba(10,10,10,.55); }
/* ---------- the story, told in the hero ---------- */
.nbl-tele { min-height: 58px; max-width: 640px; margin: -18px auto 26px; font-family: Georgia, serif; font-size: 20px; line-height: 1.45; color: #cfcfc8; transition: opacity .6s ease; }
.nbl-tele b { color: var(--lime); font-weight: 400; }
.nbl-tele.fade { opacity: 0; }
/* ---------- the four pillars, in the hero line ---------- */
.nbl-pillars-line { letter-spacing: .01em; }
.nbl-pillars-line i { font-style: normal; color: var(--lime); margin: 0 10px; }
/* ---------- replies: the helmet as the speaker, alive while it thinks ---------- */
.nb-av { width: 24px; height: 24px; display: inline-flex; color: var(--lime); flex: none; }
.nb-av svg { width: 100%; height: 100%; display: block; }
.nb-av.sm { width: 16px; height: 16px; }
.nb-av.live svg { animation: nbFloat 1.6s ease-in-out infinite; }
.nb-av.live .nb-eyes { animation: nbLook 2.4s ease-in-out infinite; }
@keyframes nbLook { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
.nb-thinking { margin: 8px 0 2px; font-size: 14px; font-weight: 500; background: linear-gradient(90deg, var(--ink-2) 0%, var(--ink-2) 40%, var(--lime) 50%, var(--ink-2) 60%, var(--ink-2) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nbShine 2s linear infinite; }
@keyframes nbShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.nb-thinking .dots i { font-style: normal; animation: nbDot 1.2s infinite; } .nb-thinking .dots i:nth-child(2) { animation-delay: .2s; } .nb-thinking .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes nbDot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.nb-think { margin: 8px 0 10px; border-left: 2px solid color-mix(in srgb, var(--lime) 35%, transparent); padding-left: 12px; }
.nb-think summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--ink-2); list-style: none; }
.nb-think summary::-webkit-details-marker { display: none; }
.nb-think-body { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: #a9a9a2; white-space: pre-wrap; max-height: 320px; overflow: auto; }
/* ---------- the Nobody coin: our currency sign, ∅ ---------- */
.nb-coin { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em; flex: none; }
.nb-coin.xs { width: 11px; height: 11px; }
.nb-coin-line { width: 20px; height: 20px; flex: none; color: inherit; } /* line coin: takes the nav's grey, white when active */
.toast .nb-coin { width: 18px; height: 18px; }
/* ---------- one continuous dark panel: the composer fades into the same colour ---------- */
main.main { background: #0F0F0F; }
#v-chat .composer { background: linear-gradient(rgba(15,15,15,0), #0F0F0F 35%); }
/* ---------- the account avatar: dark tile, lime helmet, no green block ---------- */
#meAv { background: #161616 !important; border: 1px solid rgba(255,255,255,.08); }
#meAv .nb-g { color: var(--lime); width: 22px; height: 22px; }