/* Projects: the real project dock (personal and work projects, a group whose drawer is open),
   then the open project's card (Spaces, routines, plugins, logins, members) and two project
   agents talking. Tile, fanned group stack and drawer follow client TopDock + GroupIcon. */
.pj{--t:54px;max-width:940px;margin-inline:auto}

/* ---------- dock ---------- */
.pj-dockwrap{display:flex;justify-content:center;padding-bottom:calc(var(--t) + 74px)}
.pj-dock{display:flex;align-items:flex-start;gap:16px;padding:10px 14px 9px;border-radius:26px}
.pj-seg{display:flex;flex-direction:column;align-items:center;gap:8px}
.pj-seg-row{display:flex;gap:9px}
.pj-seg-cap{font:600 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#7f8986}
.pj-rule{align-self:stretch;width:1px;margin:4px 0 18px;background:rgba(255,255,255,.12)}
.pj-tile{position:relative;display:grid;flex:none;width:var(--t);height:var(--t);place-items:center;border:1px solid rgba(132,160,200,.3);border-radius:16px;background:linear-gradient(180deg,#1d2633,#121822);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px -10px #000;font-size:calc(var(--t)*.5);line-height:1}
.pj-tile svg{width:46%;height:46%;color:#fff}
.pj-mono{font:600 calc(var(--t)*.42)/1 'DM Sans',sans-serif;color:var(--m);background:linear-gradient(180deg,color-mix(in srgb,var(--m) 26%,#141922),color-mix(in srgb,var(--m) 14%,#10141b));border-color:color-mix(in srgb,var(--m) 34%,transparent)}
.pj-tile.is-active{border-color:rgba(55,205,188,.75);box-shadow:0 0 0 2px rgba(55,205,188,.45),0 0 22px -4px rgba(55,205,188,.55)}

/* group tile: three member icons fanned, like GroupIcon's stack */
.pj-group{position:relative}
.pj-group>.pj-tile{overflow:visible;background:rgba(55,205,188,.13);border-color:rgba(55,205,188,.55);box-shadow:0 0 0 2px rgba(55,205,188,.4)}
.pj-card-s{position:absolute;left:50%;top:50%;display:grid;width:calc(var(--t)*.6);height:calc(var(--t)*.6);margin:calc(var(--t)*-.3) 0 0 calc(var(--t)*-.3);place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:calc(var(--t)*.15);background:linear-gradient(180deg,#2c3644,#1b222d);box-shadow:0 2px 6px rgba(0,0,0,.6);font-size:calc(var(--t)*.31);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.pj-card-s:nth-child(1){transform:translate(calc(var(--t)*-.2),calc(var(--t)*-.01)) rotate(-14deg)}
.pj-card-s:nth-child(2){transform:translate(calc(var(--t)*.2),calc(var(--t)*-.02)) rotate(12deg)}
.pj-card-s:nth-child(3){transform:translate(0,calc(var(--t)*.07))}
.pj-group:hover .pj-card-s:nth-child(1){transform:translate(calc(var(--t)*-.25),0) rotate(-18deg)}
.pj-group:hover .pj-card-s:nth-child(2){transform:translate(calc(var(--t)*.25),calc(var(--t)*-.01)) rotate(16deg)}
/* the group's drawer, open under its tile */
.pj-drawer{position:absolute;z-index:3;left:50%;top:calc(100% + 42px);translate:-50% 0;display:flex;gap:10px;padding:9px 10px 8px;border:1px solid rgba(255,255,255,.15);border-radius:1.35rem;background:rgba(15,18,24,.96);box-shadow:0 26px 50px -16px rgba(0,0,0,.95)}
.pj-drawer::before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;translate:-50% 0;rotate:45deg;border-left:1px solid rgba(255,255,255,.15);border-top:1px solid rgba(255,255,255,.15);background:rgb(15,18,24)}
.pj-drawer figure{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}
.pj-drawer figcaption{font:500 11px/1 'DM Sans',sans-serif;color:#b9c1be;white-space:nowrap}
.pj-drawer .is-active+figcaption{color:#e9f7f4}

/* ---------- open project ---------- */
.pj-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:18px;align-items:start}
.pj-proj{padding:18px 20px 8px;border-radius:20px;text-align:left}
.pj-head{display:flex;align-items:center;gap:12px;padding-bottom:14px}
.pj-head .pj-tile{--t:42px;border-radius:13px}
.pj-head strong{display:block;font:600 17px/1.15 'DM Sans',sans-serif;color:#f1f4f3}
.pj-head small{display:block;margin-top:4px;font:600 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--nx-teal)}
.pj-head .pj-own{margin-left:auto;font:500 11.5px/1.3 'DM Sans',sans-serif;color:#97a19e;text-align:right}
.pj-rows{margin:0;padding:0;list-style:none}
.pj-rows li{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07)}
.pj-k{display:flex;align-items:center;gap:7px;font:600 12.5px/1.2 'DM Sans',sans-serif;color:#e4e9e7}
.pj-k svg{width:14px;height:14px;flex:none;color:var(--nx-teal)}
.pj-v{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;font:500 12px/1.3 'DM Sans',sans-serif;color:#a7b0ad}
.pj-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);color:#dfe5e3;white-space:nowrap}
.pj-chip em{font-style:normal;color:#8d9794}
.pj-chip img{width:14px;height:14px;object-fit:contain}
.pj-chip.is-on{border-color:rgba(55,205,188,.3);background:rgba(55,205,188,.08);color:#c8f2ec}
.pj-chip.is-on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--nx-teal);box-shadow:0 0 8px var(--nx-teal)}
.pj-logos{display:flex;gap:6px}
.pj-logos span{display:grid;width:28px;height:28px;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.05)}
.pj-logos img{width:15px;height:15px;object-fit:contain}
.pj-av{display:flex;margin-right:4px}
.pj-av .nx-person{--s:26px;padding:1.5px;margin-left:-6px}
.pj-av .nx-person:first-child{margin-left:0}
.pj-invite{margin-left:auto;padding:4px 10px;border-radius:999px;border:1px solid rgba(55,205,188,.35);color:#bff3ec;font:600 11px/1.3 'DM Sans',sans-serif;white-space:nowrap}

/* ---------- agents talking across projects ---------- */
.pj-talk{padding:16px 16px 14px;border-radius:20px;text-align:left}
.pj-talk .nx-cap{font-size:10px;margin-bottom:12px}
.pj-msg{display:flex;gap:9px;margin-top:10px}
.pj-msg .pj-tile{--t:30px;border-radius:9px}
.pj-bub{flex:1;min-width:0;padding:8px 11px 9px;border:1px solid rgba(255,255,255,.08);border-radius:4px 13px 13px 13px;background:rgba(255,255,255,.05)}
.pj-bub b{display:block;margin-bottom:3px;font:600 11px/1.2 'DM Sans',sans-serif;color:#eef2f0}
.pj-bub b span{font-weight:500;color:#8d9794}
.pj-bub p{margin:0;font:500 12.5px/1.45 'DM Sans',sans-serif;color:#cfd6d4}
.pj-msg.is-reply .pj-bub{border-color:rgba(55,205,188,.22);background:rgba(55,205,188,.07)}
.pj-note{display:flex;align-items:center;gap:7px;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);font:500 11.5px/1.35 'DM Sans',sans-serif;color:#97a19e}
.pj-note svg{width:14px;height:14px;flex:none;color:var(--nx-teal)}

/* loop while on screen: GTM asks, then Billing answers */
.nx.is-live .pj-msg.is-reply{animation:pj-reply var(--nx-cycle) both infinite}
@keyframes pj-reply{0%,8%{opacity:0;translate:0 6px}16%,94%{opacity:1;translate:none}100%{opacity:0}}

@media(max-width:900px){.pj-body{grid-template-columns:1fr}}
@media(max-width:760px){
  .pj{--t:36px}
  .pj-dock{gap:9px;padding:8px 9px 7px;border-radius:18px}
  .pj-seg-row{gap:6px}
  .pj-tile{border-radius:12px}
  .pj-seg-cap{font-size:8.5px}
  .pj-dockwrap{padding-bottom:calc(var(--t) + 74px)}
  .pj-drawer{gap:7px;padding:7px 8px 6px;left:auto;right:-8px;translate:none}
  .pj-drawer::before{left:auto;right:calc(8px + var(--t)/2 + 1px);translate:50% 0}
  .pj-drawer figcaption{font-size:10px}
  .pj-proj{padding:14px 14px 6px}
  .pj-rows li{grid-template-columns:1fr;gap:7px}
  .pj-head .pj-own{display:none}
}
@media(prefers-reduced-motion:reduce){.nx.is-live .pj-msg.is-reply{animation:none}.pj-card-s{transition:none}}