/* ============================================================================ ai-native.css — Kim's redesigned AI-native Assistant view. Ported faithfully from her Claude Design export (Assistant.dc.html). The core mechanic: every peripheral card is a `data-slot` with one of three states. At REST it is a near-invisible faint label. On a real signal it BLOOMS into a full card — sage (illuminated) or urgent (terracotta) — with a slow glow pulse. Chat lives at the calm center; cards illuminate around it. Everything is scoped under `.aiv2` so it never collides with the rest of the cockpit's global tokens/classes. Presentational values live inline in the JSX (matching the source design); this file owns the tokens, the @keyframes, and the attribute-selector state machine that can't be expressed inline. ========================================================================== */ /* Assistant mode is full-bleed: the cockpit Rail + Topbar are suppressed in the markup, so collapse the shell grid to a single column and let .main span it. */ .app[data-mode="assistant"] { grid-template-columns: 1fr !important; } .app[data-mode="assistant"] .main { min-height: 100vh; } /* ============================================================================ MOOD-RING PERIMETER HALO — ambient page-edge glow that reflects live business state. Extends the illuminate-on-signal language (sage = calm, terracotta/urgent = something needs you) from individual cards to the whole page. Fixed + pointer-events:none so it never captures clicks or scrolls, and never adds layout height (no scrollbars). Deliberately global (not scoped under .aiv2) so both the Assistant view and the Dashboard shell can mount the same element. Colors are literal copies of the .aiv2 --sage / --urgent / --glow-sage / --glow-urgent tokens (ai-native.css above) so the two surfaces read as the same design language even though the dashboard doesn't load the .aiv2 scope. ========================================================================== */ .e28e-halo { position: fixed; top: 0; left: 0; /* Explicit vw/vh instead of relying on inset:0 to auto-resolve width/height — in some environments (verified live in the render-verify pass for this PR) a fixed box with only top/left/right/bottom:0 fails to constrain to the visual viewport when ANY ancestor already has horizontal overflow, instead sizing to the overflowed scrollWidth and then widening it further. vw/vh are viewport-relative by spec regardless of ancestor overflow, so this is the robust fix (and doubles as a guard against the halo ever being the thing that CREATES a scrollbar, per the render-verify standing rule). */ width: 100vw; height: 100vh; z-index: 1; /* above page background, below content + modals */ pointer-events: none; transition: box-shadow 1.8s ease, background 1.8s ease; box-shadow: inset 0 0 140px -60px rgba(95,126,98,0.30); } .e28e-halo[data-mood="urgent"] { box-shadow: inset 0 0 150px -55px rgba(176,98,58,0.34); } /* data-dark is set explicitly by the mounting component (reads its own theme state) rather than relying on DOM position relative to .aiv2 or , so the halo works identically no matter where in the tree it's mounted. */ .e28e-halo[data-dark="true"] { box-shadow: inset 0 0 140px -60px rgba(143,176,147,0.24); } .e28e-halo[data-dark="true"][data-mood="urgent"] { box-shadow: inset 0 0 150px -55px rgba(210,138,95,0.28); } .aiv2 { --bg:#F1EDE3; --bg2:#E9E4D6; --card:#FCFBF7; --card-rest:#F4F1E7; --ink:#26261E; --ink2:#615D52; --muted:#9C978A; --line:#E3DECF; --sage:#5F7E62; --sage-ink:#4C6B50; --urgent:#B0623A; --glow-sage:rgba(95,126,98,0.40); --glow-urgent:rgba(176,98,58,0.42); --badge-rest:#CFCABA; min-height:100%; background:var(--bg); color:var(--ink); font-family:'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; padding:0 0 90px; } .aiv2[data-theme="dark"] { --bg:#19180F; --bg2:#13120B; --card:#23221A; --card-rest:#1E1D14; --ink:#ECE7D9; --ink2:#B3AE9E; --muted:#7C7768; --line:#33312A; --sage:#8FB093; --sage-ink:#A7C4AB; --urgent:#D28A5F; --glow-sage:rgba(143,176,147,0.32); --glow-urgent:rgba(210,138,95,0.34); --badge-rest:#46443A; } .aiv2 * { box-sizing:border-box; } .aiv2 input, .aiv2 textarea, .aiv2 button { font-family:inherit; } @keyframes aiv2-glowSage { 0%,100%{ box-shadow:0 0 0 1px var(--sage), 0 10px 26px -16px var(--glow-sage); } 50%{ box-shadow:0 0 0 1.5px var(--sage), 0 18px 44px -12px var(--glow-sage); } } @keyframes aiv2-glowUrgent { 0%,100%{ box-shadow:0 0 0 1px var(--urgent), 0 10px 26px -15px var(--glow-urgent); } 50%{ box-shadow:0 0 0 2px var(--urgent), 0 20px 48px -10px var(--glow-urgent); } } @keyframes aiv2-badgePulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } } @keyframes aiv2-bloomIn { from{ opacity:0; transform:scale(.95) translateY(8px); } to{ opacity:1; transform:scale(1) translateY(0); } } /* RESTING = a faint label only. ILLUMINATED/URGENT = the card blooms in. */ .aiv2 [data-restlabel]{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); opacity:0.38; padding:9px 3px; user-select:none; cursor:default; display:inline-block; transition:opacity .4s ease; } .aiv2 [data-restlabel]:hover{ opacity:0.62; } .aiv2 [data-bloom]{ display:none; } .aiv2 [data-slot][data-state="sage"] [data-restlabel], .aiv2 [data-slot][data-state="urgent"] [data-restlabel]{ display:none; } .aiv2 [data-slot][data-state="sage"] [data-bloom]{ display:flex; border-color:var(--sage); animation:aiv2-bloomIn .55s cubic-bezier(.2,.7,.2,1) both, aiv2-glowSage 4.2s ease-in-out .6s infinite; } .aiv2 [data-slot][data-state="urgent"] [data-bloom]{ display:flex; border-color:var(--urgent); animation:aiv2-bloomIn .55s cubic-bezier(.2,.7,.2,1) both, aiv2-glowUrgent 2.9s ease-in-out .6s infinite; } .aiv2[data-motion="off"] [data-bloom]{ animation:none !important; } .aiv2 [data-seg][data-active="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,0.10); } .aiv2 [data-seg][data-active="false"]{ background:transparent; color:var(--muted); } /* Card hover lift (the source used a style-hover attribute; done here in CSS). */ .aiv2 [data-bloom][data-hover="lift"]:hover{ transform:translateY(-3px); } /* Chat thread (conversation state) — calm, minimal. */ .aiv2 .aiv2-msg{ max-width:560px; } .aiv2 .aiv2-msg-user{ margin-left:auto; text-align:right; } .aiv2 .aiv2-typing span{ display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:var(--muted); animation:aiv2-badgePulse 1s ease-in-out infinite; } .aiv2 .aiv2-typing span:nth-child(2){ animation-delay:.15s; } .aiv2 .aiv2-typing span:nth-child(3){ animation-delay:.3s; } /* ---- STAGE: chat block centered in the viewport, cards ringed around it ---- */ .aiv2 .aiv2-stage{ position:relative; max-width:1280px; margin:0 auto; min-height:calc(100vh - 88px); /* fill the space under the topbar */ display:grid; place-items:center; /* vertically + horizontally center the chat */ padding:24px 40px 56px; } /* Once a conversation has messages, anchor the composer toward the lower portion of the stage instead of dead-centering it — the thread stacks upward from just above the composer (standard messaging layout). Cards stay ringed the same way; only the center column's vertical anchor moves. */ .aiv2 .aiv2-stage.conversing{ place-items:end center; padding-bottom:64px; /* keeps the composer clear of "back to calm" below it */ } .aiv2 .aiv2-center{ width:min(600px,92vw); z-index:3; display:flex; flex-direction:column; gap:26px; } /* Each card floats on an ellipse around the centered chat. Widest at the vertical middle (ml/mr flank the chat); tucked inward at top and bottom. */ .aiv2 .aiv2-ring{ position:absolute; width:272px; z-index:2; } .aiv2 .aiv2-ring.pos-tl{ top:6%; left:4%; } .aiv2 .aiv2-ring.pos-tr{ top:6%; right:4%; text-align:right; } .aiv2 .aiv2-ring.pos-ml{ top:50%; left:0; transform:translateY(-50%); } .aiv2 .aiv2-ring.pos-mr{ top:50%; right:0; transform:translateY(-50%); text-align:right; } .aiv2 .aiv2-ring.pos-bl{ bottom:7%; left:7%; } .aiv2 .aiv2-ring.pos-br{ bottom:7%; right:7%; text-align:right; } /* Narrower screens: drop the ring, stack cards under the chat in a single column. */ @media (max-width:1120px){ .aiv2 .aiv2-stage{ display:flex; flex-direction:column; align-items:center; min-height:0; gap:16px; padding:32px 20px 56px; } .aiv2 .aiv2-center{ width:100%; order:-1; } .aiv2 .aiv2-ring{ position:static; width:100%; max-width:600px; transform:none; text-align:left; } .aiv2 .aiv2-ring.pos-tr, .aiv2 .aiv2-ring.pos-mr, .aiv2 .aiv2-ring.pos-br{ text-align:left; } .aiv2 [data-topbar]{ flex-wrap:wrap; } }