/* * ALTANA: the executive assistant's presence layer. * * Fred, 2026-08-03: an icon that appears when she is interacting, with simple animation, rotating * through six faces so she looks fresh roughly every ten sign-ins. * * TWO HAZARDS THIS FILE IS BUILT AROUND, both from scars already in this repo: * * 1. A `position: fixed` element stops being fixed the moment ANY ancestor carries a transform, * filter, perspective or will-change: it silently becomes relative to that ancestor instead of * the viewport. This app has ~50 fixed rules across 17 stylesheets and plenty of transformed * containers, so #altana is mounted directly on by altana.js and every animation below * is scoped to the dot's own INNER elements. Never add a transform to #altana itself. * 2. The app shipped with no navigation at all between 721px and 1180px because two breakpoints * disagreed. The dot's resting position is therefore expressed in one place per axis and is * checked at exactly those widths by altana_test.mjs. * * PERFORMANCE: this thing lives on every screen for the whole session, so animation is restricted * to transform and opacity, which the compositor handles without repainting. No animated filters, * no box-shadow animation, no JS rAF loop. Everything pauses when the tab is hidden. */ :root { --altana-size: 56px; --altana-inset: 20px; /* distance from the viewport edges at rest */ --altana-dock-clearance: 84px; /* room above the mobile dock so the dot never sits on it */ } #altana { position: fixed; /* * THE STACKING MAP (Fred, 2026-08-04: "she is supposed to appear on every page"). * z-index 60 put her BELOW the surfaces people actually live in, so she showed once on the * base chat screen and vanished the moment Dominion Works slid up - which read as "moving * her made her disappear". The app's real layers, measured, are: * * 70 #ide-root (Dominion Works - fixed, inset 0, OPAQUE: covers everything under it) * 80 #dock-nav (mobile dock), .bg-help (beginner help overlay) * 130 #altana <- the assistant floats above every SURFACE... * 131 #altana-panel * 340+ IDE popovers, tour, lightbox (400) * 1380+ the Forge overlay, true modals * * ...and below every TRANSIENT (popover, tour, lightbox, forge, modal), which may honestly * cover her while they are up. altana_test.mjs pins these relationships against the real * stylesheets, so a new surface layer cannot silently bury her again. */ z-index: 130; width: var(--altana-size); height: var(--altana-size); right: var(--altana-inset); bottom: var(--altana-inset); border: 0; padding: 0; background: none; cursor: grab; -webkit-tap-highlight-color: transparent; /* touch-action:none lets the drag handler own the gesture so dragging the dot never scrolls the page underneath it on a phone. */ touch-action: none; /* NO transform here. See hazard 1 above. Position is driven by left/top when dragged. */ } #altana[hidden] { display: none; } #altana:active { cursor: grabbing; } /* Below the rail/dock breakpoint the mobile dock owns the bottom strip. */ @media (max-width: 1180px) { #altana { bottom: var(--altana-dock-clearance); } } /* The face itself. Separate element so it can be transformed freely without touching #altana. */ .altana-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .82; /* "lightly visible" at rest, Fred's word */ transition: opacity .35s ease, transform .35s ease; animation: altana-breathe 6.5s ease-in-out infinite; will-change: transform, opacity; } /* The glow. A separate ring behind the face so the pulse never repaints the artwork. */ .altana-halo { position: absolute; inset: -6px; border-radius: 18px; pointer-events: none; background: radial-gradient(closest-side, var(--altana-glow, rgba(120,200,255,.55)), transparent 72%); opacity: 0; transition: opacity .4s ease; animation: altana-halo-pulse 6.5s ease-in-out infinite; } /* ---- states, set by altana.js -------------------------------------------------------------- */ #altana:hover .altana-face, #altana:focus-visible .altana-face { opacity: 1; transform: scale(1.06); } #altana:focus-visible { outline: 2px solid var(--altana-glow, #78c8ff); outline-offset: 3px; } /* * Thinking: she BREATHES WITH LIGHT (Fred's original plan, restated 2026-08-04). This used to be * a slow rotation, which reads as a loading spinner rather than as someone considering something. * The face swells very slightly while the halo behind it brightens and widens on the same beat, * so the light is what moves. Transform and opacity only, per the performance rule at the top. */ #altana[data-state="thinking"] .altana-face { opacity: 1; animation: altana-think-breathe 1.9s ease-in-out infinite; } #altana[data-state="thinking"] .altana-halo { opacity: 1; animation: altana-think-glow 1.9s ease-in-out infinite; } /* Speaking: a quicker breath, no rotation, so it reads as talking rather than working. */ #altana[data-state="speaking"] .altana-face { opacity: 1; animation: altana-breathe 1.5s ease-in-out infinite; } #altana[data-state="speaking"] .altana-halo { opacity: .75; animation: altana-halo-pulse 1.5s ease-in-out infinite; } /* Attention: one shimmer, then back to idle. Deliberately finite: a permanently pulsing badge is the kind of thing people learn to ignore, and then it is worth nothing when it matters. */ #altana[data-state="attention"] .altana-face { opacity: 1; animation: altana-nudge .9s ease-in-out 3; } #altana[data-state="attention"] .altana-halo { opacity: .85; } /* Arrival: she fades up rather than popping in. */ #altana[data-enter] .altana-face { animation: altana-arrive .6s cubic-bezier(.2,.8,.3,1) both, altana-breathe 6.5s ease-in-out .6s infinite; } @keyframes altana-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @keyframes altana-halo-pulse { 0%, 100% { opacity: .28; } 50% { opacity: .62; } } @keyframes altana-think-breathe { 0%, 100% { transform: scale(1); opacity: .86; } 50% { transform: scale(1.075); opacity: 1; } } @keyframes altana-think-glow { 0%, 100% { opacity: .32; transform: scale(.96); } 50% { opacity: .95; transform: scale(1.08); } } @keyframes altana-nudge { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.08) rotate(-4deg); } 75% { transform: scale(1.08) rotate(4deg); } } @keyframes altana-arrive { from { opacity: 0; transform: scale(.6); } to { opacity: .82; transform: scale(1); } } /* * Motion is a preference, not a decoration. Everything above collapses to a plain fade here: the * dot still CHANGES on state (so the information survives) but nothing moves. */ @media (prefers-reduced-motion: reduce) { .altana-face, .altana-halo, #altana[data-state] .altana-face, #altana[data-state] .altana-halo, #altana[data-enter] .altana-face, .altana-thinking-dots::before, #altana-panel[data-answered] .altana-panel-inner::after, #altana-panel[data-enter] .altana-panel-inner { animation: none !important; } /* The information still survives without motion: the dots stay legible and the flash overlay stays dark rather than strobing. */ .altana-thinking-dots::before { opacity: 1; } #altana-panel[data-answered] .altana-panel-inner::after { opacity: 0; } #altana[data-state="thinking"] .altana-face, #altana[data-state="speaking"] .altana-face { opacity: 1; } #altana[data-state="thinking"] .altana-halo, #altana[data-state="speaking"] .altana-halo, #altana[data-state="attention"] .altana-halo { opacity: .7; } } /* * ============================================================================================ * THE PANEL. Same two hazards as the dot: mounted on for the same fixed-position-trap * reason (see the top of this file), and animation restricted to transform/opacity for the same * compositor-only reason. altana_test.mjs's keyframe scan covers this file as a whole, not just * the dot's own rules, so a new keyframe here that animated anything else would fail the same test. * * Brass, glass, glow: same family as dominion-ui.css and the dominion-cinematic-0*.css sheets * (cut-corner clip-paths, thin cyan glass borders, a copper accent for actionable controls), but * expressed with its own variables rather than importing theirs. This file ships standalone (the * ops/altana-preview.html page never loads dominion-ui.css) and must never depend on a sheet that * might not be present. * ============================================================================================ */ :root { --altana-panel-w: min(378px, calc(100vw - 28px)); --altana-panel-h: min(72vh, 620px); --altana-ink: #eaf3fb; --altana-ink-soft: #b9cddd; --altana-muted: #7d90a3; --altana-line: rgba(150, 214, 255, .22); --altana-copper: #f2c48f; --altana-copper-line: rgba(247, 177, 112, .4); --altana-danger: #ff9d8a; } #altana-panel { position: fixed; z-index: 131; /* one above the dot; see the stacking map at #altana */ right: var(--altana-inset); bottom: calc(var(--altana-inset) + var(--altana-size) + 14px); width: var(--altana-panel-w); height: var(--altana-panel-h); display: flex; pointer-events: none; /* the inner card owns interaction; this box only positions it */ } #altana-panel[hidden] { display: none; } .altana-panel-inner { pointer-events: auto; position: relative; /* anchors the arrival-flash overlay below */ display: flex; flex-direction: column; width: 100%; min-height: 0; border: 1px solid var(--altana-line); background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 12%), linear-gradient(150deg, rgba(9, 26, 38, .92), rgba(3, 10, 16, .94) 60%); box-shadow: 0 22px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(230, 248, 255, .1); backdrop-filter: blur(10px) saturate(1.3); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); color: var(--altana-ink-soft); font: 400 13.5px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; } #altana-panel[data-enter] .altana-panel-inner { animation: altana-panel-arrive .28s cubic-bezier(.2, .8, .3, 1) both; } .altana-panel-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 12px 14px; border-bottom: 1px solid var(--altana-line); background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent); } .altana-panel-title { font: 700 11px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--altana-ink); } .altana-panel-close { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--altana-line); border-radius: 7px; background: rgba(255, 255, 255, .03); color: var(--altana-ink-soft); font: 600 15px/1 system-ui, sans-serif; cursor: pointer; } .altana-panel-close:hover { color: var(--altana-ink); border-color: rgba(230, 248, 255, .4); } .altana-panel-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; } .altana-panel-log:empty::before { content: "Ask Altana anything about this screen."; color: var(--altana-muted); font-style: italic; } /* * THE ARRIVAL FLASH. The whole card catches light for a beat when she answers, so an answer that * lands while the reader is looking somewhere else still announces itself. * * It is an overlay whose OPACITY animates, never a box-shadow or background animation: those * repaint the card on every frame, and altana_test refuses any keyframe that touches a property * other than transform/opacity. The parent's clip-path shapes it, so the light follows the card. */ .altana-panel-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(120% 70% at 50% 0%, var(--altana-glow, rgba(120, 200, 255, .55)), transparent 70%), linear-gradient(180deg, rgba(190, 235, 255, .16), transparent 45%); } #altana-panel[data-answered] .altana-panel-inner::after { animation: altana-answer-flash .9s ease-out 1; } @keyframes altana-answer-flash { 0% { opacity: 0; } 18% { opacity: .55; } 100% { opacity: 0; } } .altana-msg { max-width: 92%; padding: 8px 11px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; } /* * THE THINKING ROW. The dot animates too, but on a phone the panel is a bottom sheet that covers * it, so the transcript carries the state where the person is actually looking. */ .altana-thinking { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 2px; background: rgba(255, 255, 255, .04); border: 1px solid var(--altana-line); color: var(--altana-ink-soft); font-style: italic; opacity: .9; } .altana-thinking-dots { display: inline-flex; width: 18px; } .altana-thinking-dots::before { content: "..."; letter-spacing: 1px; animation: altana-dots 1.25s steps(4, end) infinite; } @keyframes altana-dots { 0% { opacity: .25; } 50% { opacity: 1; } 100% { opacity: .25; } } .altana-msg-user { align-self: flex-end; background: rgba(120, 180, 255, .14); border: 1px solid rgba(150, 200, 255, .28); color: var(--altana-ink); } .altana-msg-altana { align-self: flex-start; background: rgba(255, 255, 255, .04); border: 1px solid var(--altana-line); color: var(--altana-ink-soft); } .altana-msg-system { align-self: stretch; background: rgba(247, 177, 112, .08); border: 1px solid var(--altana-copper-line); color: var(--altana-copper); font-size: 12.5px; } .altana-msg-error { align-self: stretch; background: rgba(255, 110, 90, .1); border: 1px solid rgba(255, 140, 120, .4); color: var(--altana-danger); font-size: 12.5px; } .altana-msg-confirm { align-self: stretch; border: 1px solid var(--altana-line); border-radius: 10px; padding: 10px 11px; background: rgba(255, 255, 255, .03); } .altana-confirm-q { margin-bottom: 8px; color: var(--altana-ink); } .altana-confirm-actions { display: flex; gap: 8px; } .altana-confirm-actions button { flex: 1; padding: 6px 10px; border-radius: 7px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; } .altana-confirm-actions button:disabled { opacity: .5; cursor: default; } .altana-confirm-yes { border: 1px solid rgba(150, 255, 140, .5); background: rgba(90, 255, 80, .1); color: #b7ffab; } .altana-confirm-no { border: 1px solid rgba(255, 140, 120, .5); background: rgba(255, 90, 80, .1); color: #ffb3a6; } .altana-confirm-done .altana-confirm-actions { display: none; } .altana-worklist-label { margin-bottom: 6px; font-weight: 600; color: var(--altana-ink); } .altana-worklist-items { margin: 0; padding-left: 18px; } .altana-worklist-items li { margin: 2px 0; } .altana-panel-form { flex: none; display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--altana-line); background: linear-gradient(0deg, rgba(255, 255, 255, .03), transparent); } .altana-panel-input { flex: 1 1 auto; min-width: 0; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--altana-line); background: rgba(2, 10, 17, .6); color: var(--altana-ink); font: inherit; } .altana-panel-input:focus-visible { outline: 2px solid rgba(120, 210, 255, .7); outline-offset: 1px; } .altana-panel-send { flex: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--altana-copper-line); background: rgba(247, 177, 112, .12); color: var(--altana-copper); font: 700 12px/1 system-ui, sans-serif; } .altana-panel-send:hover { background: rgba(247, 177, 112, .2); } @keyframes altana-panel-arrive { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Below the rail/dock breakpoint, same clearance the dot itself uses (see altana.js header). */ @media (max-width: 1180px) { #altana-panel { bottom: calc(var(--altana-dock-clearance) + var(--altana-size) + 14px); } } /* Phones: a bottom-sheet-style card spanning the safe width rather than a floating corner card. */ @media (max-width: 480px) { #altana-panel { right: 10px; left: 10px; width: auto; bottom: calc(var(--altana-dock-clearance) + var(--altana-size) + 10px); height: min(66vh, 560px); } }