/* Drawing styles from the ShappyOS landing page (site/landing.css), scoped to .v2scope. */
.v2scope {
  
  --frame: #070707; --bg: #101010; --card: #18181b; --card-2: #202023; --card-3: #2a2a2e;
  --fg: #ececf0; --muted: #9a9aa6; --faint: #6c6c78; --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.18);
  --brand: #b9a0ee; --brand-2: #8f74d8; --brand-ink: #1b1330; --brand-soft: rgba(185,160,238,.14);
  --ok: #70dba0; --warn: #ffc65c; --err: #ff7278; --info: #8cc8ff;
  --ok-soft: rgba(112,219,160,.14); --err-soft: rgba(255,114,120,.14);
  --tok-cmd: #8cc8ff; --tok-arg: #ececf0; --tok-com: #7d7d8a; --tok-str: #c4e86b; --tok-url: #ffc65c;
  --night: #0a0d1c; --star: #e9e6ff;
  
  --c-chat: #8cc8ff; --c-bots: #b9a0ee; --c-customers: #7fe0b0; --c-projects: #ff8a5c; --c-skills: #9d93ff; --c-assets: #62d6d6;
  --c-mail: #ff9a8a; --c-calendar: #ffc65c; --c-data: #c4e86b; --c-apps: #ff9fd0; --c-workers: #9aa3b8; --c-yours: #e8c46a;
  --sg-cutout: var(--card);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}
html[data-theme=light] .v2scope {
  
  --frame: #e7eaf0; --bg: #f7f8fa; --card: #ffffff; --card-2: #eef0f4; --card-3: #e2e6ec;
  --fg: #20242c; --muted: #596375; --faint: #8a93a3; --line: rgba(30,40,60,.12); --line-2: rgba(30,40,60,.22);
  --brand: #6a4fc4; --brand-2: #8f74d8; --brand-ink: #ffffff; --brand-soft: rgba(106,79,196,.12);
  --ok: #21794a; --warn: #945315; --err: #bd3038; --info: #245caa;
  --ok-soft: rgba(33,121,74,.12); --err-soft: rgba(189,48,56,.12);
  --tok-cmd: #245caa; --tok-arg: #20242c; --tok-com: #7a8396; --tok-str: #4f7a12; --tok-url: #945315;
  --night: #1b2140; --star: #3a3f63;
  --c-chat: #2563b8; --c-bots: #6a4fc4; --c-customers: #1f7a52; --c-projects: #b4461f; --c-skills: #4c45c9; --c-assets: #0f7b7b;
  --c-mail: #b6413a; --c-calendar: #8a5a00; --c-data: #557a10; --c-apps: #b0336f; --c-workers: #4d5668; --c-yours: #8a6a10;
}
.v2scope .k-chat { --k: var(--c-chat); }
.v2scope .k-bots { --k: var(--c-bots); }
.v2scope .k-customers { --k: var(--c-customers); }
.v2scope .k-projects { --k: var(--c-projects); }
.v2scope .k-skills { --k: var(--c-skills); }
.v2scope .k-assets { --k: var(--c-assets); }
.v2scope .k-mail { --k: var(--c-mail); }
.v2scope .k-calendar { --k: var(--c-calendar); }
.v2scope .k-data { --k: var(--c-data); }
.v2scope .k-apps { --k: var(--c-apps); }
.v2scope .k-workers { --k: var(--c-workers); }
.v2scope .k-yours { --k: var(--c-yours); }
.v2scope .k-tile { fill: color-mix(in srgb, var(--k) 16%, transparent); transition: fill .35s; }
.v2scope .k-tile.on { fill: color-mix(in srgb, var(--k) 34%, transparent); }
.v2scope .k-fill { fill: var(--k); }
.v2scope .av text.k-text, .v2scope .k-text { fill: var(--k); }
.v2scope .k-dot { fill: var(--k); }
.v2scope [data-ghost] { display: inline-grid; place-items: center; flex: none; }
.v2scope [data-ghost] > .sg { width: 100%; height: 100%; }
.v2scope .reveal.in { opacity: 1; transform: none; }
@keyframes twinkle { 50% { opacity: .12; } }
@keyframes shoot { 0% { opacity: 0; translate: 0 0; } 3% { opacity: .7; } 9% { opacity: 0; translate: -260px 116px; } 100% { opacity: 0; translate: -260px 116px; } }
html[data-theme=light] .v2scope .shot { background: #c9b9f2; }
.v2scope .win { position: relative; border-radius: 14px; background: var(--frame); box-shadow: 0 30px 80px rgba(20,10,50,.45); overflow: hidden; text-align: left; }
.v2scope .av { display: block; width: 100%; height: auto; }
.v2scope .av text { font-family: var(--font); fill: var(--fg); }
.v2scope .a-frame { fill: var(--frame); }
.v2scope .a-bg { fill: var(--bg); }
.v2scope .a-c1 { fill: var(--card); }
.v2scope .a-c2 { fill: var(--card-2); }
.v2scope .a-c3 { fill: var(--card-3); }
.v2scope .a-fg { fill: var(--fg); }
.v2scope .a-white { fill: #fff; }
.v2scope .a-brand { fill: var(--brand); }
.v2scope .a-brandsoft { fill: var(--brand-soft); }
.v2scope .a-oksoft { fill: var(--ok-soft); }
.v2scope .a-errsoft { fill: var(--err-soft); }
.v2scope .a-ok { fill: var(--ok); }
.v2scope .a-warn { fill: var(--warn); }
.v2scope .a-err { fill: var(--err); }
.v2scope .a-info { fill: var(--info); }
.v2scope .a-fgbtn { fill: var(--fg); transition: fill .25s; }
.v2scope .a-shadow { filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.v2scope .a-line { stroke: var(--line); stroke-width: 1; }
.v2scope .a-link { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 6; transition: stroke .4s; }
.v2scope .a-link.on { stroke: var(--k, var(--brand)); stroke-dasharray: none; }
.v2scope .av text.a-m, .v2scope .av .a-mt { fill: var(--muted); }
.v2scope .av text.a-f { fill: var(--faint); }
.v2scope .av text.a-bgt { fill: var(--bg); }
.v2scope .av text.a-inkt { fill: var(--brand-ink); }
.v2scope .av text.a-okt { fill: var(--ok); }
.v2scope .av text.a-warnt { fill: var(--warn); }
.v2scope .av text.a-errt { fill: var(--err); }
.v2scope .av text.a-infot { fill: var(--info); }
.v2scope .av text.a-brandt { fill: var(--brand); }
.v2scope .a-11 { font-size: 11px; }
.v2scope .a-12 { font-size: 12px; }
.v2scope .a-13 { font-size: 13px; }
.v2scope .a-14 { font-size: 14px; }
.v2scope .a-15 { font-size: 15px; }
.v2scope .a-16 { font-size: 16px; }
.v2scope .a-20 { font-size: 20px; }
.v2scope .a-22 { font-size: 22px; }
.v2scope .av .a-b { font-weight: 600; }
.v2scope .av .a-mono { font-family: var(--mono); }
.v2scope .a-tab { font-variant-numeric: tabular-nums; }
.v2scope .a-msg, .v2scope .a-fade { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .45s var(--ease); transform-box: fill-box; }
.v2scope .a-msg.in, .v2scope .a-fade.in { opacity: 1; transform: none; }
.v2scope .a-hi { transition: fill .35s; }
.v2scope .a-cursor { transition: transform .9s var(--ease); }
.v2scope .a-glow { transition: opacity .4s; }
@keyframes paflow { to { stroke-dashoffset: -20; } }
.v2scope .pain:not(.in) .pa-w2, .v2scope .pain:not(.in) .pa-w3 { transform: translate(24px, 40px); }
.v2scope .pain.in .pa-spin { transform: rotate(-360deg); }
@keyframes pafloat { 50% { transform: translateY(-4px); } }
.v2scope .pv-msg [data-ghost] { width: 26px; height: 26px; }
.v2scope .pv-bot [data-ghost] { width: 34px; height: 34px; }
.v2scope .gh-light { display: none !important; }
html[data-theme=light] .v2scope .gh-light { display: block !important; }
html[data-theme=light] .v2scope .gh-dark { display: none !important; }
@keyframes ucin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v2scope .uc-what [data-ghost] { width: 30px; height: 30px; }
html[data-theme=light] .v2scope .cta { --star: #e9e6ff; }
@media (max-width: 640px) {
.v2scope .win { overflow-x: auto; scrollbar-width: thin; }
.v2scope .win .av { min-width: 720px; }
}
@media (prefers-reduced-motion: reduce) {
.v2scope .chip-w, .v2scope .chip-g, .v2scope .a-msg, .v2scope .a-fade, .v2scope .app, .v2scope .uc-panel { transition: opacity .2s !important; transform: none !important; animation: none !important; }
.v2scope .pain:not(.in) .pa-w2 { transform: translate(40px, 24px); }
.v2scope .pain:not(.in) .pa-w3 { transform: translate(56px, 8px); }
.v2scope .a-cursor { transition: none; }
}
/* The App ghost styles (src/manager/styles/shappy-ghost.css), scoped to .v2scope. */
.v2scope .sg { display:block; overflow:visible; }
.v2scope .sg * { transform-box:fill-box; transform-origin:center; }
.v2scope .sg-shadow { fill:currentColor; opacity:.14; }
.v2scope .sg-body { stroke-width:1.6; stroke-linejoin:round; transition:stroke .35s, fill .35s; }
.v2scope .sg-tint { transition:filter .45s, opacity .45s; }
.v2scope .sg-eyes { opacity:0; transform:scale(.4); transition:opacity .18s, transform .28s cubic-bezier(.34,1.56,.64,1); }
.v2scope .sg-look { transition:transform .35s cubic-bezier(.22,1,.36,1); }
.v2scope .sg-mouth, .v2scope .sg-smile { opacity:0; transform:scale(.3); transition:opacity .18s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.v2scope .sg-fx > * { opacity:0; transition:opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.v2scope .sg-badge { transform:scale(.2); }
.v2scope .sg-act { transition:transform .5s cubic-bezier(.22,1,.36,1); }
.v2scope .sg:is([data-state=idle], .v2scope [data-state=listening], .v2scope [data-state=thinking], .v2scope [data-state=working], .v2scope [data-state=speaking]) .sg-eyes-open, .v2scope .sg[data-state=success] .sg-eyes-happy, .v2scope .sg[data-state=error] .sg-eyes-x, .v2scope .sg[data-state=sleeping] .sg-eyes-closed { opacity:1; transform:none; }
.v2scope .sg[data-state=thinking] .sg-look { transform:translate(.7px,-.9px); }
.v2scope .sg[data-state=listening] .sg-look { transform:scale(1.18); }
.v2scope .sg[data-state=working] .sg-look { transform:scaleY(.55); }
.v2scope .sg:is([data-state=idle], .v2scope [data-state=speaking], .v2scope [data-state=listening]) .sg-blink { animation:sg-blink 4.2s infinite; }
.v2scope .sg[data-state=speaking] .sg-mouth { opacity:1; transform:none; }
.v2scope .sg[data-state=speaking] .sg-mouth-inner { animation:sg-talk .32s ease-in-out infinite alternate; }
.v2scope .sg[data-state=success] .sg-smile { opacity:1; transform:none; }
.v2scope .sg-float { animation:sg-float 3.2s ease-in-out infinite; }
.v2scope .sg-shadow { animation:sg-shadow 3.2s ease-in-out infinite; }
.v2scope .sg[data-state=thinking] .sg-act { transform:rotate(-6deg); }
.v2scope .sg[data-state=listening] .sg-act { animation:sg-sway 2.4s ease-in-out infinite; }
.v2scope .sg[data-state=working] :is(.sg-float, .v2scope .sg-shadow) { animation-duration:.55s; }
.v2scope .sg[data-state=working] .sg-act { animation:sg-lean .55s ease-in-out infinite alternate; }
.v2scope .sg[data-state=speaking] .sg-act { animation:sg-nod 1.1s ease-in-out infinite; }
.v2scope .sg[data-state=success] .sg-act { animation:sg-hop 1.4s cubic-bezier(.3,.7,.4,1) infinite; }
.v2scope .sg[data-state=error] .sg-act { animation:sg-shake 1.6s ease-in-out infinite; }
.v2scope .sg[data-state=error] .sg-body { stroke:#ff7278; }
.v2scope .sg[data-state=sleeping] :is(.sg-float, .v2scope .sg-shadow) { animation-duration:5.5s; }
.v2scope .sg[data-state=sleeping] .sg-act { transform:translateY(1px); animation:sg-breathe 3.6s ease-in-out infinite; }
.v2scope .sg[data-state=sleeping] .sg-tint { filter:saturate(.25) brightness(.85); opacity:.82; }
.v2scope .sg[data-state=thinking] .sg-dots { opacity:1; }
.v2scope .sg[data-state=thinking] .sg-dots circle { animation:sg-pulse 1.2s ease-in-out infinite; }
.v2scope .sg[data-state=thinking] .sg-dots circle:nth-child(2) { animation-delay:.2s; }
.v2scope .sg[data-state=thinking] .sg-dots circle:nth-child(3) { animation-delay:.4s; }
.v2scope .sg[data-state=working] .sg-sparks { opacity:1; }
.v2scope .sg[data-state=working] .sg-sparks path { animation:sg-twinkle .9s ease-in-out infinite; }
.v2scope .sg[data-state=working] .sg-sparks path:nth-child(2) { animation-delay:.45s; }
.v2scope .sg[data-state=listening] .sg-waves { opacity:1; }
.v2scope .sg[data-state=listening] .sg-waves path { animation:sg-wave 1.4s ease-out infinite; }
.v2scope .sg[data-state=listening] .sg-waves path:nth-child(even) { animation-delay:.35s; }
.v2scope .sg[data-state=sleeping] .sg-zzz { opacity:1; }
.v2scope .sg[data-state=sleeping] .sg-zzz text { animation:sg-zzz 2.8s ease-in infinite; }
.v2scope .sg[data-state=sleeping] .sg-zzz text:nth-child(2) { animation-delay:1.4s; }
.v2scope .sg[data-state=success] .sg-badge-ok, .v2scope .sg[data-state=error] .sg-badge-err { opacity:1; transform:none; }
.v2scope .sg-sway { transform-origin:50% 100%; }
.v2scope .sg:is([data-state=working], .v2scope [data-state=listening]) .sg-sway { animation:sg-leaf .6s ease-in-out infinite alternate; }
.v2scope .sg:is([data-state=thinking], .v2scope [data-state=working]) .sg-glow { animation:sg-glow 1s ease-in-out infinite alternate; }
.v2scope .sg[data-state=sleeping] .sg-glow { opacity:.35; }
.v2scope .sg[data-state=listening] .sg-cups { animation:sg-cups .7s ease-in-out infinite alternate; }
.v2scope .sg-still .sg-float, .v2scope .sg-still .sg-shadow { animation:none; }
@keyframes sg-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.8px); } }
@keyframes sg-shadow { 0%,100% { transform:scaleX(1); opacity:.14; } 50% { transform:scaleX(.86); opacity:.09; } }
@keyframes sg-blink { 0%,92%,100% { transform:scaleY(1); } 95% { transform:scaleY(.1); } }
@keyframes sg-talk { from { transform:scaleY(.35); } to { transform:scaleY(1); } }
@keyframes sg-sway { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg); } }
@keyframes sg-lean { from { transform:rotate(-2deg) translateX(-.2px); } to { transform:rotate(2deg) translateX(.2px); } }
@keyframes sg-nod { 0%,100% { transform:rotate(0); } 30% { transform:rotate(-3deg); } 60% { transform:rotate(2deg); } }
@keyframes sg-hop { 0%,55%,100% { transform:translateY(0) scale(1); } 10% { transform:translateY(.4px) scale(1.06,.92); } 25% { transform:translateY(-3px) scale(.95,1.06); } 42% { transform:translateY(0) scale(1.04,.96); } }
@keyframes sg-shake { 0%,40%,100% { transform:translateX(0); } 5%,15%,25% { transform:translateX(-.9px) rotate(-3deg); } 10%,20%,30% { transform:translateX(.9px) rotate(3deg); } }
@keyframes sg-breathe { 0%,100% { transform:translateY(1px) scale(1); } 50% { transform:translateY(1px) scale(1.035,.985); } }
@keyframes sg-pulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@keyframes sg-twinkle { 0%,100% { opacity:.2; transform:scale(.5) rotate(0); } 50% { opacity:1; transform:scale(1.1) rotate(45deg); } }
@keyframes sg-wave { 0% { opacity:0; transform:scale(.7); } 30% { opacity:1; } 100% { opacity:0; transform:scale(1.25); } }
@keyframes sg-zzz { 0% { opacity:0; transform:translate(0,1px); } 25% { opacity:1; } 100% { opacity:0; transform:translate(2px,-4px); } }
@keyframes sg-leaf { from { transform:rotate(-10deg); } to { transform:rotate(10deg); } }
@keyframes sg-glow { from { filter:brightness(1); } to { filter:brightness(1.6) drop-shadow(0 0 1.2px #ffd66b); } }
@keyframes sg-cups { from { transform:scale(1); } to { transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce) {
.v2scope .sg *, .v2scope .sg .sg-float, .v2scope .sg .sg-shadow { animation:none !important; }
.v2scope .sg[data-state=thinking] .sg-dots circle, .v2scope .sg[data-state=working] .sg-sparks path, .v2scope .sg[data-state=listening] .sg-waves path, .v2scope .sg[data-state=sleeping] .sg-zzz text { animation:sg-pulse 2.4s ease-in-out infinite !important; transform:none; }
.v2scope .sg .sg-eyes, .v2scope .sg .sg-fx > *, .v2scope .sg .sg-mouth, .v2scope .sg .sg-smile, .v2scope .sg .sg-act, .v2scope .sg .sg-look { transition:opacity .2s !important; }
}
.v2scope .avatar.avatar-ghost { background:transparent !important; overflow:visible; }
.v2scope .avatar.avatar-ghost::after { display:none; }
.v2scope .avatar.avatar-ghost > .sg { width:100%; height:100%; color:var(--foreground); }
.v2scope .bot-list-item .mini-avatar.avatar-ghost { overflow:visible; }