/* ============================================================================
fergi-ai-vessel.css — the organic liquid-glass vessel chrome
grafting-organic-vessel (2026-07-20, Opus 4.8). Re-skins the earlier
"Orbital Circuit-Island" vessel with ChatGPT's organic liquid-glass design
(chosen from the redesign bids). The ENGINE is unchanged: fergi-ai-vessel.js
still positions #fergiVessel at a bounding box and reposition the real modal
into its interior rect via the four --fv-int-* custom properties. Only the
SKIN changed — the sculpted band is now a glowing violet→cyan organic shell
with drifting particles + rim glow, and the modal interior ("deck") is re-
skinned to dark liquid glass.
ACTIVATION SEAM: everything here is gated behind body.fv-active, added ONLY by
fergi-ai-vessel.js on desktop activation. Absent that class, geometry AND skin
are byte-identical to the pristine base modal (desktop base + mobile sheet).
Rollback = git revert this file + fergi-ai-vessel.js; the engine + base modal
are untouched, so no behavior regression is possible.
Design source of truth: ChatGPT organic-vessel bid
(~/Downloads/fergi-ai-organic-vessel.html). Palette (FDC-logo tuned, Joe 2026-07-21): FDC orchid pink #ef3fa5 /
plum-slate #9d5fe0 → FDC steel-teal #38aae8 accents (sampled from the
FergiDotCom logo: globe #c67caa, band #2f9fd0).
============================================================================ */
#fergiVessel {
position: fixed;
left: 0; top: 0; width: 720px; height: 600px;
/* One tier BELOW .unified-ai-modal (z 10350, styles.css) so the real modal
paints ON TOP as the interior deck; the organic shell shows around it. */
z-index: 10349;
display: none; /* hidden until body.fv-active (desktop only) */
overflow: visible; /* rim glow + particles bulge past the box */
outline: none;
touch-action: none;
will-change: left, top, width, height;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
pointer-events: auto; /* the widget owns its footprint (band swallows
stray clicks — parity with the App-Panel modal
fill); handles + deck opt back in */
}
/* Show the vessel only while active (desktop). */
body.fv-active #fergiVessel { display: block; }
/* Issue 1 (directing-desktop-scenes S2): the decorative band is the MOVE
surface — grab cursor on the whole vessel; the resize handles + close
keep their own cursors (they sit above and win). */
#fergiVessel { cursor: grab; }
body.fv-dragging #fergiVessel { cursor: grabbing; }
/* Universal ✕ at the vessel's upper-right corner (Issue 10, ruling R6) —
window-manager chrome on the CONTAINER, readable against the sculpted
band (the inner-header close read as invisible there and hides below). */
#fergiVessel .fv-close {
position: absolute;
top: 14px; right: 16px;
z-index: 22; /* above band + handles (20) */
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
padding: 0;
border: 1px solid rgba(255, 214, 238, 0.35);
border-radius: 50%;
background: rgba(20, 12, 34, 0.55);
color: rgba(255, 224, 242, 0.85);
cursor: pointer;
pointer-events: auto;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
#fergiVessel .fv-close:hover {
background: rgba(239, 63, 165, 0.35);
color: #fff;
box-shadow: 0 0 12px rgba(239, 63, 165, 0.55);
}
/* State-reflecting cycle control at the vessel's upper-LEFT (truing-vessel-
chrome S4, #6 fleet standard): the glyph depicts the current window state
(step pair per Joe /listen 2026-07-23 — .ffw-step rules in
fergi-presentation.css): − / + walk dock ↔ persistent ↔ maximized stepwise.
Mirrors the .fv-close geometry; the ✕ stays upper-right, far away. */
#fergiVessel .fv-steps {
position: absolute;
top: 14px; left: 16px;
z-index: 22; /* above band + handles (20) */
display: flex; gap: 6px;
pointer-events: auto;
}
#fergiVessel .fv-steps .ffw-step {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
padding: 0;
border: 1px solid rgba(216, 234, 255, 0.32);
border-radius: 50%;
background: rgba(20, 12, 34, 0.55);
color: rgba(222, 240, 252, 0.85);
cursor: pointer;
pointer-events: auto;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
#fergiVessel .fv-steps .ffw-step:hover:not([disabled]) {
background: rgba(157, 95, 224, 0.38);
color: #fff;
box-shadow: 0 0 12px rgba(157, 95, 224, 0.55);
}
/* Exit Convention (one dismissal control): while the desktop vessel frames
the deck, the corner ✕ is THE close — the inner-header close retires.
Mobile (no fv-active) keeps the inner close untouched. */
body.fv-active .unified-ai-header .unified-ai-close { display: none; }
/* ---------- the organic shell SVG — fills the box, reshapes with it ---------- */
#fergiVessel .fv-frame {
position: absolute; inset: -18px;
width: calc(100% + 36px); height: calc(100% + 36px);
pointer-events: none;
overflow: visible;
}
#fergiVessel .fv-rim-glow {
fill: none; stroke: url(#fv-vesselRim); stroke-width: 20; opacity: .42;
filter: url(#fv-wideGlow);
animation: fv-rimBreathe 5s cubic-bezier(.22,.8,.24,1) infinite alternate;
}
#fergiVessel .fv-vessel-body {
fill: url(#fv-vesselBody); stroke: url(#fv-vesselRim); stroke-width: 10;
filter: url(#fv-outerGlow);
}
#fergiVessel .fv-vessel-lip {
fill: none; stroke: url(#fv-vesselRim); stroke-width: 2.6; opacity: .95;
filter: url(#fv-softGlow);
}
#fergiVessel .fv-vessel-highlight {
fill: none; stroke: url(#fv-highlightGradient); stroke-width: 2.1; opacity: .76;
}
#fergiVessel .fv-vessel-trace {
fill: none; stroke: url(#fv-traceGradient); stroke-width: 1.35;
stroke-linecap: round; stroke-dasharray: 3 9; opacity: .85;
animation: fv-traceFlow 8.5s linear infinite;
}
/* ---------- drifting perimeter particles (generated by the JS) -------------- */
#fergiVessel .fv-particles { position: absolute; inset: -4px; z-index: 2; overflow: visible; pointer-events: none; }
#fergiVessel .fv-particle {
position: absolute; width: var(--particle-size); height: var(--particle-size);
border-radius: 50%; color: #5fd8f0; background: currentColor; opacity: .55;
box-shadow: 0 0 7px currentColor, 0 0 17px currentColor;
animation: fv-particleDrift var(--particle-duration) ease-in-out infinite alternate;
}
#fergiVessel .fv-particle.violet { color: #ff9ad6; }
#fergiVessel .fv-particle.white { color: #fff5fb; }
/* ---------- neural-tree + orb + center-jewel accents (in the sculpted band) -- */
#fergiVessel .fv-neural-tree {
position: absolute; left: 2.6%; top: 27%; width: 58px; height: 42%;
/* S4/D4.2: .6 -> .85 — the tree is the vessel's signature mark and was
reading as a smudge against the sculpted band. */
opacity: .85; pointer-events: none; z-index: 3;
filter: drop-shadow(0 0 12px rgba(255, 142, 210, .85));
}
#fergiVessel .fv-neural-tree .fv-tree-line { fill: none; stroke: url(#fv-treeGradient); stroke-width: 1.5; stroke-linecap: round; }
#fergiVessel .fv-neural-tree .fv-tree-node { fill: #fff5fb; filter: url(#fv-nodeGlow); }
#fergiVessel .fv-tree-orb {
position: absolute; left: 3.4%; top: 26%; width: 52px; height: 52px; border-radius: 50%;
pointer-events: none; z-index: 2;
border: 1px solid rgba(255, 214, 238, .34);
background: radial-gradient(circle, rgba(255,255,255,.15), rgba(226,67,159,.12) 48%, rgba(2,6,23,.10) 70%);
box-shadow: 0 0 0 6px rgba(226, 67, 159, .05), 0 0 30px rgba(244, 92, 180, .5);
}
#fergiVessel .fv-center-jewel {
position: absolute; left: 50%; bottom: 1.5%; width: 34px; height: 34px;
transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 8;
border: 1px solid rgba(255, 205, 235, .45);
background: radial-gradient(circle at 38% 32%, #fff 0 4%, #ffb3dd 6%, #9d5fe0 18%, rgba(30,64,175,.48) 45%, rgba(2,6,23,.2) 70%);
box-shadow: 0 0 0 6px rgba(157, 95, 224, .06), 0 0 26px rgba(120, 190, 240, .7);
}
#fergiVessel .fv-center-jewel::after {
content: ""; position: absolute; inset: 12px; border-radius: 50%;
background: white; box-shadow: 0 0 12px white;
}
/* ---------- resize handles (on the bounding box) --------------------------- */
#fergiVessel .fv-handle { position: absolute; z-index: 20; pointer-events: auto; }
#fergiVessel .fv-n { top: 0; left: 32px; right: 32px; height: 12px; cursor: ns-resize; }
#fergiVessel .fv-s { bottom: 0; left: 32px; right: 32px; height: 12px; cursor: ns-resize; }
#fergiVessel .fv-e { right: 0; top: 32px; bottom: 32px; width: 12px; cursor: ew-resize; }
#fergiVessel .fv-w { left: 0; top: 32px; bottom: 32px; width: 12px; cursor: ew-resize; }
#fergiVessel .fv-ne { top: 0; right: 0; width: 28px; height: 28px; cursor: nesw-resize; }
#fergiVessel .fv-nw { top: 0; left: 0; width: 28px; height: 28px; cursor: nwse-resize; }
#fergiVessel .fv-se { bottom: 0; right: 0; width: 30px; height: 30px; cursor: nwse-resize; }
#fergiVessel .fv-sw { bottom: 0; left: 0; width: 28px; height: 28px; cursor: nesw-resize; }
/* Always-on cyan corner cues at all FOUR corners (truing-vessel-chrome S3,
#4 fleet standard) — resize is discoverable at rest, not only on hover;
the vessel hover brings them to full strength. */
#fergiVessel .fv-ne::after,
#fergiVessel .fv-nw::after,
#fergiVessel .fv-sw::after,
#fergiVessel .fv-se::after {
content: ""; position: absolute; width: 11px; height: 11px;
border: 0 solid rgba(95, 216, 240, .45);
transition: border-color .18s ease;
filter: drop-shadow(0 0 6px rgba(56, 170, 232, .9));
pointer-events: none;
}
#fergiVessel .fv-ne::after { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
#fergiVessel .fv-nw::after { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; }
#fergiVessel .fv-sw::after { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
#fergiVessel .fv-se::after { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }
#fergiVessel:hover .fv-ne::after,
#fergiVessel:hover .fv-nw::after,
#fergiVessel:hover .fv-sw::after,
#fergiVessel:hover .fv-se::after {
border-color: rgba(95, 216, 240, .95);
}
/* ============================================================================
ANIMATIONS — GPU-cheap (opacity / transform / stroke-dashoffset). Namespaced.
============================================================================ */
@keyframes fv-particleDrift {
from { transform: translate3d(0,0,0) scale(.82); opacity: .16; }
to { transform: translate3d(var(--particle-dx), var(--particle-dy), 0) scale(1.28); opacity: .74; }
}
@keyframes fv-traceFlow { to { stroke-dashoffset: -118; } }
@keyframes fv-rimBreathe { from { opacity: .30; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
#fergiVessel .fv-particle,
#fergiVessel .fv-vessel-trace,
#fergiVessel .fv-rim-glow { animation: none !important; }
#fergiVessel .fv-particle { opacity: .34; }
#fergiVessel .fv-vessel-trace { stroke-dashoffset: 0; }
#fergiVessel .fv-rim-glow { opacity: .27; }
}
/* ============================================================================
THE FRAME-FOLLOWER OVERRIDE — desktop only, gated by body.fv-active.
Reposition the REAL modal into the vessel's interior rect (the four --fv-int-*
custom properties, written every drag/resize frame by fergi-ai-vessel.js).
Unchanged from the engine contract.
============================================================================ */
body.fv-active .unified-ai-modal:is(.active, .is-open) {
top: var(--fv-int-top, var(--nav-height));
left: var(--fv-int-left, var(--side-nav-width));
width: var(--fv-int-w, auto);
height: var(--fv-int-h, auto);
right: auto;
bottom: auto;
}
/* ============================================================================
THE DECK SKIN — dark liquid glass, desktop-vessel only (body.fv-active).
Higher specificity than the light base .unified-ai-* rules, scoped so mobile
(pink bottom-sheet) + any non-vessel path stay byte-identical. Ported from the
ChatGPT organic-vessel bid onto the EXISTING modal structure (container →
body → messages / input / presentation-panel), so every capability is intact.
============================================================================ */
/* The container is the glowing dark-glass deck set inside the organic shell. */
body.fv-active .unified-ai-container {
/* Deep radius so the deck's corners curve WITH the organic shell and never
step on the neural thread; the halo shadows fuse deck into shell so the
two read as one organism (Joe design canon 2026-07-21 — permanent render). */
border-radius: 46px;
border: 1px solid rgba(255, 255, 255, .16);
background:
radial-gradient(circle at 10% 8%, rgba(226, 67, 159, .30), transparent 40%),
radial-gradient(circle at 94% 90%, rgba(56, 170, 232, .24), transparent 42%),
radial-gradient(circle at 50% 115%, rgba(157, 95, 224, .16), transparent 45%),
linear-gradient(150deg, rgba(30, 16, 66, .96), rgba(8, 22, 50, .97) 55%, rgba(6, 44, 66, .95));
box-shadow:
inset 0 1px rgba(255, 255, 255, .10),
inset 0 0 55px rgba(15, 23, 42, .5),
0 0 0 1px rgba(255, 160, 215, .12),
0 0 46px rgba(226, 67, 159, .18),
0 0 90px rgba(56, 170, 232, .12),
0 34px 90px rgba(0, 0, 0, .58);
backdrop-filter: blur(26px) saturate(1.35);
overflow: hidden;
/* opening-fergi-apertures S7 — routed through the room's vocabulary rather
than left as a literal. The S7 token block
(`html.ffvr-vessel #unifiedAIModal .unified-ai-container`) carries an id and
therefore OUTRANKS this rule on `color`, so the literal below had become a
declaration that never applies while the vessel flags are on. A dead
declaration is drift: it reads as the authority and is not. Reading the
token with the Joe-canon value as the fallback keeps flag-off byte-identical
and makes the flag-on inheritance visible where somebody will look for it.
The organic deck's gradients, glows and radius above are UNTOUCHED — Joe
design canon 2026-07-21, permanent render, and not S7's to repaint. */
color: var(--ffvr-ink, #f5f7ff);
}
/* Header — the liquid gradient band; stays the drag handle. */
body.fv-active .unified-ai-header {
background: linear-gradient(90deg, rgba(226, 47, 155, .58), rgba(120, 70, 220, .40) 55%, rgba(40, 160, 225, .30));
border-bottom: 1px solid rgba(255, 255, 255, .10);
box-shadow: inset 0 -1px rgba(56, 170, 232, .10);
color: #f5f7ff;
cursor: grab;
}
body.fv-active.fv-dragging .unified-ai-header { cursor: grabbing; }
body.fv-active.fv-dragging,
body.fv-active.fv-resizing { user-select: none; }
body.fv-active .unified-ai-title,
body.fv-active .unified-ai-title span:last-child,
body.fv-active #unifiedAITitle { color: #f5f7ff; text-shadow: 0 0 8px rgba(226, 67, 159, .35); }
/* `body.fv-active .unified-ai-icon` lived here until ceding-welcome-precedence
S3 (issue #4a). The 🧠 it painted was removed from index.html — a decorative
duplicate of the app bar's own brain avatar on mobile — so this rule had
nothing left to style. A rule with no element is dead code, not a spare part
(the same reasoning that retired `_wnSyncPanelSlot()` at S1). */
/* Header pills — model badge + context chip as glass. */
body.fv-active .ai-header-model-badge,
body.fv-active .context-badge {
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: inset 0 1px rgba(255, 255, 255, .08);
color: #f5f7ff;
backdrop-filter: blur(12px);
}
body.fv-active .context-badge { background: rgba(40, 135, 175, .20); }
/* Header buttons — new-conversation / minimize / close as glass chips. */
body.fv-active .unified-ai-new-convo-btn,
body.fv-active .unified-ai-minimize,
body.fv-active .unified-ai-exit-studio-btn {
color: #ffeaf6;
background: rgba(255, 255, 255, .065);
border: 1px solid rgba(255, 255, 255, .14);
}
body.fv-active .unified-ai-new-convo-btn:hover,
body.fv-active .unified-ai-minimize:hover,
body.fv-active .unified-ai-exit-studio-btn:hover {
background: rgba(255, 255, 255, .15);
box-shadow: 0 0 18px rgba(255, 150, 210, .28);
}
body.fv-active .unified-ai-new-convo-btn { color: #fde68a; }
body.fv-active .unified-ai-close {
color: #f5f7ff;
background: rgba(255, 255, 255, .065);
border: 1px solid rgba(255, 255, 255, .14);
}
body.fv-active .unified-ai-close:hover {
background: rgba(251, 113, 133, .18);
box-shadow: 0 0 18px rgba(251, 113, 133, .30);
}
body.fv-active .unified-ai-close svg { stroke: currentColor; }
/* Messages area — transparent over the deck; light text; glowing scrollbar. */
body.fv-active .unified-ai-messages {
background: transparent;
color: #f8fafc;
scrollbar-width: thin;
scrollbar-color: rgba(226, 67, 159, .5) transparent;
}
body.fv-active .unified-ai-messages::-webkit-scrollbar { width: 10px; }
body.fv-active .unified-ai-messages::-webkit-scrollbar-thumb {
border: 3px solid transparent; border-radius: 999px;
background: rgba(226, 67, 159, .44); background-clip: padding-box;
}
/* Message avatars — glowing rings. */
body.fv-active .unified-ai-message .message-avatar {
border: 1px solid rgba(255, 176, 221, .40);
background: rgba(160, 40, 110, .18);
box-shadow: 0 0 0 5px rgba(226, 67, 159, .045), 0 0 20px rgba(226, 67, 159, .30);
color: #fff5fb;
}
/* Message bubbles — the bubble background lives on .message-content (base app
convention), so style THAT as a single clean glass panel. .message-text stays
text-only (no inner box, no sheen) so nothing obscures the reading area. */
body.fv-active .unified-ai-message .message-content {
border: 1px solid rgba(214, 120, 190, .26); border-radius: 18px;
background: linear-gradient(145deg, rgba(80, 40, 100, .86), rgba(20, 42, 84, .74));
box-shadow: 0 12px 32px rgba(0, 0, 0, .20);
backdrop-filter: blur(10px);
color: #f8fafc;
}
body.fv-active .unified-ai-message.user .message-content {
border-color: rgba(95, 216, 240, .28);
background: linear-gradient(145deg, rgba(226, 67, 159, .92), rgba(56, 170, 232, .66));
color: #ffffff;
}
body.fv-active .unified-ai-message .message-text,
body.fv-active .unified-ai-message .message-text p,
body.fv-active .unified-ai-message .message-text li { color: #f8fafc; }
body.fv-active .unified-ai-message .message-text a { color: #ffa8d8; }
body.fv-active .unified-ai-message.assistant .message-text strong { color: #ffffff; }
body.fv-active .unified-ai-message.user .message-text { color: #ffffff; }
body.fv-active .unified-ai-message .message-time { color: #eccfe4; }
body.fv-active .unified-ai-message.user .message-time { color: rgba(255, 255, 255, .75); }
body.fv-active .unified-ai-message.loading .message-content { color: #eccfe4; }
/* Input dock — dark glass with a violet top-edge. */
body.fv-active .unified-ai-input-area {
border-top: 1px solid rgba(157, 95, 224, .20);
background: linear-gradient(180deg, rgba(7, 18, 40, .48), rgba(5, 18, 38, .82));
box-shadow: inset 0 16px 30px rgba(2, 6, 23, .26);
}
body.fv-active #unifiedAIInput {
border: 1px solid rgba(214, 120, 190, .33); border-radius: 999px;
background: linear-gradient(180deg, rgba(11, 33, 62, .88), rgba(10, 28, 54, .78));
color: #f5f7ff;
box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 0 0 5px rgba(157, 95, 224, .025);
}
body.fv-active #unifiedAIInput::placeholder { color: #94a3b8; }
body.fv-active #unifiedAIInput:focus {
border-color: rgba(255, 176, 221, .80);
background: linear-gradient(180deg, rgba(18, 43, 77, .95), rgba(10, 31, 60, .88));
box-shadow: 0 0 0 4px rgba(226, 67, 159, .13), 0 0 25px rgba(157, 95, 224, .24), inset 0 1px rgba(255, 255, 255, .07);
}
/* Composer buttons — glowing voice-mode / send.
⛔ The vessel treatments for `.unified-ai-voice-btn` (the plain mic) and
`.unified-ai-conversation-btn` (the inert speech bubble) were removed with their
markup by ceding-welcome-precedence S1, 2026-09-20 (issue #3). The row's voice
affordance on this surface is the Say It door, `#unifiedAISayItBtn`, which carries
its own treatment below. */
body.fv-active .unified-ai-voice-mode-btn {
color: #fff; border: 1px solid rgba(255, 255, 255, .17);
background: linear-gradient(145deg, rgba(157, 95, 224, .86), rgba(244, 92, 180, .78));
box-shadow: 0 0 22px rgba(157, 95, 224, .40);
}
body.fv-active .unified-ai-send-btn {
color: #fff; border: 1px solid rgba(255, 255, 255, .17);
background: linear-gradient(145deg, #ef3fa5, #38aae8);
box-shadow: 0 0 0 4px rgba(56, 170, 232, .07), 0 0 26px rgba(56, 170, 232, .48), inset 0 1px rgba(255, 255, 255, .22);
}
body.fv-active .unified-ai-voice-mode-btn:hover,
body.fv-active .unified-ai-send-btn:hover { filter: brightness(1.12); }
body.fv-active .unified-ai-send-btn svg { stroke: #fff; }
/* Presentation split-view panel — glass so it reads over the deck. */
body.fv-active .unified-ai-body { background: transparent; }
body.fv-active .unified-ai-presentation-panel {
background: linear-gradient(150deg, rgba(8, 15, 33, .55), rgba(4, 16, 32, .62));
border-left: 1px solid rgba(214, 120, 190, .18);
color: #f8fafc;
}
/* The +/- size-stepper affordance styling retired 2026-07-22 with the size
ladder itself (directing-desktop-scenes S2, spec Issue 2) — free 8-dir
resize + the tri-state control replaced stepped sizing. */
/* Joe 2026-07-21 (Mary walk): minimize is a required control — it keeps the
session + child modals alive while ✕ is the true TERMINATE. Since S2 the
control is the TRI-STATE cycle; since truing-vessel-chrome S4 (#6 fleet
standard) it lives at the vessel's upper-LEFT CORNER as the state-
reflecting .fv-steps pair, and the inner-header minimize retires under
fv-active — Exit-Convention parity with the corner ✕ (one control per
function). Mobile (no fv-active) keeps the inner minimize untouched. */
body.fv-active .unified-ai-header .unified-ai-minimize { display: none; }
/* ============================================================================
MOBILE VESSEL SKIN (Joe 2026-07-21) — the vessel's identity carried to the
mobile Fergi sheet WITHOUT the sculpted band: full working space preserved.
Signature elements kept: dark liquid-glass deck, the magenta→violet→azure
rim as a slim luminous ring, the gradient header band, glass bubbles, dark
input dock. Gated on body.fv-mobile (set by fergi-ai-vessel.js on mobile
open); absent that class the pristine mobile sheet is untouched.
============================================================================ */
@media (max-width: 767px) {
/* The deck — dark liquid glass fills the sheet */
body.fv-mobile .mobile-ai-sheet .unified-ai-container,
body.fv-mobile .unified-ai-modal.mobile-ai-sheet {
background:
radial-gradient(circle at 8% 4%, rgba(226, 67, 159, .22), transparent 36%),
radial-gradient(circle at 96% 96%, rgba(56, 170, 232, .18), transparent 38%),
radial-gradient(circle at 50% 115%, rgba(157, 95, 224, .14), transparent 45%),
linear-gradient(160deg, rgba(30, 16, 66, .98), rgba(8, 22, 50, .99) 55%, rgba(6, 44, 66, .98));
color: #f5f7ff;
}
/* Slim luminous rim — the vessel signature at 2px, hugging the sheet edge */
body.fv-mobile .unified-ai-modal.mobile-ai-sheet:is(.active, .is-open)::after {
content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none;
padding: 2px;
background: linear-gradient(120deg, #ff85cf, #ef3fa5 28%, #9d5fe0 54%, #35aae8 78%, #40e2d2);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: .85;
}
/* Header — the liquid gradient band replaces the flat maroon */
body.fv-mobile .mobile-ai-header {
background: linear-gradient(90deg, rgba(226, 47, 155, .92), rgba(120, 70, 220, .88) 55%, rgba(40, 160, 225, .85));
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, .14);
box-shadow: 0 6px 22px rgba(157, 95, 224, .30);
}
body.fv-mobile .mobile-ai-header * { color: #ffffff; }
/* Messages surface + glass bubbles (mirror the desktop deck language) */
body.fv-mobile .mobile-ai-sheet .unified-ai-messages { background: transparent; color: #f8fafc; }
body.fv-mobile .mobile-ai-sheet .unified-ai-message .message-content {
border: 1px solid rgba(214, 120, 190, .28); border-radius: 18px;
background: linear-gradient(145deg, rgba(80, 40, 100, .88), rgba(20, 42, 84, .78));
color: #f8fafc; box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
body.fv-mobile .mobile-ai-sheet .unified-ai-message.user .message-content {
border-color: rgba(95, 216, 240, .30);
background: linear-gradient(145deg, rgba(226, 67, 159, .92), rgba(56, 170, 232, .68));
color: #fff;
}
body.fv-mobile .mobile-ai-sheet .unified-ai-message .message-text,
body.fv-mobile .mobile-ai-sheet .unified-ai-message .message-text p,
body.fv-mobile .mobile-ai-sheet .unified-ai-message .message-text li { color: #f8fafc; }
body.fv-mobile .mobile-ai-sheet .unified-ai-message .message-time { color: #dcc0d8; }
body.fv-mobile .mobile-ai-sheet .unified-ai-message .message-avatar {
border: 1px solid rgba(255, 176, 221, .40);
background: rgba(160, 40, 110, .22);
box-shadow: 0 0 14px rgba(226, 67, 159, .30);
}
/* Input dock — dark glass, luminous focus */
body.fv-mobile .mobile-ai-sheet .unified-ai-input-area {
border-top: 1px solid rgba(157, 95, 224, .28);
background: linear-gradient(180deg, rgba(10, 20, 46, .60), rgba(8, 18, 42, .92));
}
body.fv-mobile .mobile-ai-sheet #unifiedAIInput {
border: 1px solid rgba(214, 120, 190, .40); border-radius: 999px;
background: rgba(12, 30, 60, .85); color: #f5f7ff;
}
body.fv-mobile .mobile-ai-sheet #unifiedAIInput::placeholder { color: #a8a3c8; }
body.fv-mobile .mobile-ai-sheet #unifiedAIInput:focus {
border-color: rgba(255, 150, 210, .85);
box-shadow: 0 0 0 3px rgba(226, 67, 159, .18), 0 0 18px rgba(157, 95, 224, .30);
}
body.fv-mobile .mobile-ai-sheet .unified-ai-send-btn {
background: linear-gradient(145deg, #ef3fa5, #38aae8); color: #fff; border: none;
box-shadow: 0 0 18px rgba(56, 170, 232, .45);
}
}
/* ============================================================================
MOBILE VESSEL SKIN v2 (Joe 2026-07-21, same walk): "too subtle" — wider
neural borders + the header reborn as the soul of the vessel. Cascade
overrides of the v1 block above; still fully gated on body.fv-mobile.
============================================================================ */
@media (max-width: 767px) {
/* ── Rim v2: 5px living gradient + neural filament edge-glow ── */
body.fv-mobile .unified-ai-modal.mobile-ai-sheet:is(.active, .is-open)::after {
padding: 5px;
background: linear-gradient(120deg, #ff85cf, #ef3fa5 26%, #9d5fe0 52%, #35aae8 78%, #40e2d2);
opacity: .95;
filter: drop-shadow(0 0 14px rgba(226, 67, 159, .55));
}
/* Neural filaments drifting up the side borders + synapse stars — a second
decorative layer inside the rim, kept to the edges so content stays clear */
body.fv-mobile .unified-ai-modal.mobile-ai-sheet:is(.active, .is-open)::before {
content: ""; position: absolute; inset: 5px; z-index: 59; pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-repeat: repeat-y, repeat-y;
background-position: left top, right top;
/* S4/D4.2 (Joe: "denser… aware of the background in a good way"). The tile
narrows 64 -> 52px, so the filament pattern REPEATS more often up the rim
— density from more of the same weave rather than from heavier strokes,
which at rim scale would have read as a border, not a nervous system. */
background-size: 52px auto, 52px auto;
opacity: .95;
}
/* ── THE HEADER — aurora glass, the vessel's soul in a band ── */
body.fv-mobile .mobile-ai-header {
position: relative;
overflow: hidden;
background:
radial-gradient(140% 180% at 12% -30%, rgba(255, 133, 207, .48), transparent 52%),
radial-gradient(150% 200% at 88% -40%, rgba(64, 226, 210, .34), transparent 55%),
radial-gradient(120% 160% at 50% 130%, rgba(157, 95, 224, .45), transparent 60%),
linear-gradient(160deg, #2a1050, #1a1240 45%, #082a48);
border-bottom: none;
box-shadow:
0 1px 0 rgba(255, 255, 255, .12) inset,
0 10px 34px rgba(157, 95, 224, .40);
}
/* the neural constellation woven through the band */
body.fv-mobile .mobile-ai-header::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center 62%;
background-size: 100% auto;
/* S4/D4.2: full strength + a soft synapse glow. The band's aurora was
swallowing the constellation drawn over it — the threads were authored
but not seen. */
opacity: 1;
filter: drop-shadow(0 0 5px rgba(255, 154, 214, .5));
}
/* the luminous band edge — the rim gradient closing the composition */
body.fv-mobile .mobile-ai-header::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: linear-gradient(90deg, #ff85cf, #ef3fa5 30%, #9d5fe0 55%, #35aae8 80%, #40e2d2);
box-shadow: 0 0 16px rgba(226, 67, 159, .70), 0 0 30px rgba(56, 170, 232, .45);
}
body.fv-mobile .mobile-ai-header-top { position: relative; z-index: 2; padding: 10px 14px 14px; }
/* wordmark: luminous gradient text with a soft halo — the identity moment */
body.fv-mobile .mobile-ai-title {
font-size: calc(24px * var(--type-scale, 1)); font-weight: 800; letter-spacing: .06em;
background: linear-gradient(92deg, #ffd6ee 5%, #ff85cf 30%, #e9d9ff 52%, #7fd0f2 75%, #40e2d2 95%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
text-shadow: none;
filter: drop-shadow(0 0 12px rgba(255, 133, 207, .55));
}
/* controls float as glass orbs */
body.fv-mobile .mobile-ai-hamburger,
body.fv-mobile .mobile-ai-exit {
color: #ffeaf6;
background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.22), rgba(157,95,224,.20) 55%, rgba(10,10,30,.35));
border: 1px solid rgba(255, 214, 238, .35);
border-radius: 50%; width: 44px; height: 44px; /* 44, not 42: the floor (Greg G-164) */
box-shadow: 0 0 14px rgba(226, 67, 159, .35);
display: inline-flex; align-items: center; justify-content: center;
}
}
/* ============================================================================
MOBILE VESSEL SKIN v3 — THE CROWN (Joe 2026-07-21: "That header area is
waiting for a worthy Fergi AI crown!"). The shell's universal top-nav and
bottom chrome join the vessel while Fergi is open (body.fv-mobile rides
the data-modal-palette contract; every other modal's chrome untouched).
iPhone reality honored: the top strip stays deep and quiet so the time,
battery and Dynamic Island read cleanly; the aurora blooms live at the
band's sides and base; the hamburger stays a visible glass orb.
============================================================================ */
@media (max-width: 767px) {
/* ── THE CROWN — aurora + constellation across the full top band ── */
body.fv-mobile .top-nav {
background:
/* side auroras, kept low + lateral so the status indicators float clear */
radial-gradient(120% 150% at 0% 100%, rgba(239, 63, 165, .50), transparent 55%),
radial-gradient(120% 150% at 100% 100%, rgba(64, 226, 210, .34), transparent 55%),
radial-gradient(90% 120% at 50% 140%, rgba(157, 95, 224, .55), transparent 65%),
linear-gradient(175deg, #12082e 0%, #1d0f44 55%, #250f4e 100%) !important;
border-bottom: none !important;
color: #f5ecff !important;
position: relative;
overflow: hidden;
}
/* the constellation — neural threads arcing beneath the island zone */
body.fv-mobile .top-nav::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto;
}
/* the crown's luminous base edge */
body.fv-mobile .top-nav::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1;
background: linear-gradient(90deg, #ff85cf, #ef3fa5 28%, #9d5fe0 54%, #35aae8 78%, #40e2d2);
box-shadow: 0 0 18px rgba(226, 67, 159, .75), 0 0 34px rgba(56, 170, 232, .5);
}
body.fv-mobile .top-nav > * { position: relative; z-index: 2; }
/* ── truing-pocket-stagecraft S1 (#1) — the mobile title was never centered ──
Root cause, measured on iPhone geometry (390x844) before the fix:
`.nav-center` computed `position: relative; left: 183px;
transform: translateX(-116.3px)` and sat at x=167 w=233 — its centre at
283.5 in a 390px band whose centre is 195.
`.nav-center` carries `position: absolute; left: 50%;
transform: translateX(-50%)` by contract (styles.css:391). Those three
declarations are a PLACEMENT and only mean that under `absolute`. The
blanket rule above (specificity 0,3,0, added for the constellation
z-layering) re-declares `position: relative` over every top-nav child,
including .nav-center — and under `relative`, `left: 50%` stops being a
placement and becomes an OFFSET FROM THE FLOW POSITION. The slot was
therefore shifted right by (50% of the band − half its own width) on top
of wherever the flex flow had already put it, and the more content the
slot carried the further right it drifted. That is why Joe saw the title
right of centre and the operator strip running off the right edge: one
defect, not two, and it affected EVERY mobile view's title — not only the
Fergi AI modal this session was assigned.
The fix restores the placement and keeps the z-lift the blanket rule was
added for. ⛔ Do not "fix" a mis-centred mobile title with a margin: the
centring is structural and a margin only re-hides this. */
body.fv-mobile .top-nav > .nav-center { position: absolute; z-index: 2; }
/* wordmark + context line */
body.fv-mobile .top-nav .nav-title,
body.fv-mobile .top-nav h1 {
font-weight: 800; letter-spacing: .05em;
background: linear-gradient(92deg, #ffd6ee 5%, #ff85cf 32%, #ecdcff 55%, #7fd0f2 78%, #40e2d2 96%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 0 10px rgba(255, 133, 207, .5));
}
body.fv-mobile .top-nav em,
body.fv-mobile .top-nav i { color: #cdb8ea; opacity: .95; }
/* hamburger: always-visible glass orb */
body.fv-mobile .top-nav .mobile-hamburger-btn {
color: #ffeaf6 !important; opacity: 1 !important;
background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.24), rgba(157,95,224,.22) 55%, rgba(8,8,26,.4));
border: 1px solid rgba(255, 214, 238, .38);
border-radius: 50%;
box-shadow: 0 0 14px rgba(226, 67, 159, .4);
}
/* ── the bottom chrome joins the vessel ── */
body.fv-mobile .mobile-ai-sheet .unified-ai-input-area {
background: linear-gradient(180deg, rgba(14, 22, 52, .92), rgba(10, 16, 44, .98)) !important;
border-top: 1px solid rgba(214, 120, 190, .35) !important;
box-shadow: 0 -6px 22px rgba(157, 95, 224, .25);
}
body.fv-mobile[data-modal-palette="fergi-ai"] {
--mobile-tab-bar-bg: linear-gradient(175deg, #1d0f44, #12082e);
--mobile-tab-bar-border-top: rgba(255, 133, 207, .45);
--mobile-tab-bar-fg-inactive: rgba(226, 208, 255, .62);
--mobile-tab-bar-fg-active: #40e2d2;
--mobile-tab-bar-shadow: 0 -3px 16px rgba(157, 95, 224, .45);
}
body.fv-mobile[data-modal-palette="fergi-ai"] .mobile-tab-bar .mcp-slot { color: #ffd6ee; }
}
/* Greg G-015 (2026-09-18, greg-ipad-4/5): the vessel's floating Close drew
30×30 on the iPad's desktop layout; the room-windows.css floor lost to this
sheet's `body.fv-active` specificity. Same specificity, later, coarse only. */
@media (pointer: coarse) {
/* Measured on FergiPAD (greg-ipad-6 probe): the visible Close is `.fv-close`
(the vessel's floating X), 30×30, min-height 0 — not `.unified-ai-close`. */
body.fv-active .fv-close,
.fv-close { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
}