/** * Four-zone shell layout — TASK-010, TASK-011, TASK-012..016 * * Phone-first; responsive via data-form-factor on * Handedness via [data-handedness="left|right"] on * * Token references assume design-system tokens.css loaded externally. * Falls back to inline custom properties for standalone testing. */ /* ================================================================ Design tokens (fallbacks for isolated rendering) ================================================================ */ :root { --shell-conduct-width: 52px; --shell-act-width: 52px; /* Awning bar / ring sizing — bar height tracks ring RADIUS so the * ring sits half-embedded in the bar regardless of size. The * mode button (centred on the bar) is the same diameter as the * ring; bar thickness is exactly half. Bumping --awning-ring-size * scales both consistently. */ --awning-ring-size: 64px; --awning-bar-height: calc(var(--awning-ring-size) / 2); --shell-converse-height: var(--awning-bar-height); --shell-belong-height: 64px; /* Z-index hierarchy (highest → lowest): * --shell-z-awning ▒ Assistant awning — always on top * --shell-z-menus ▒ popovers/overlays from inside zones * (above zones, below awning) * --shell-z-conduct ▒ card controller (left edge) * --shell-z-act ▒ per-card actions (right edge — future) * --shell-z-belong ▒ belong toolbar (bottom centre) * --shell-z-cards ▒ cards baseline (their internal stacking * adds from there) * * Per the workspace's screen-edge contract: cards always sit * BELOW every toolbar; the awning always sits above everything * (including all popovers). */ --shell-z-awning: 200; --shell-z-menus: 180; --shell-z-conduct: 150; --shell-z-act: 120; --shell-z-belong: 100; --shell-z-cards: 1; --shell-transition: 200ms ease; /* Awning states */ --awning-calm-tone: var(--border-color, #e2e8f0); --awning-ring-calm: var(--neutral, #94a3b8); --awning-ring-whisper: #a78bfa; --awning-ring-update: #34d399; --awning-ring-question: #fb923c; --awning-ring-urgent: #f87171; } /* ================================================================ — root layout ================================================================ */ minxi-shell { display: grid; grid-template-rows: var(--shell-converse-height) 1fr var(--shell-belong-height); grid-template-columns: 1fr; width: 100%; height: 100dvh; overflow: hidden; position: relative; } .shell-body { display: grid; /* Conduct and Act columns both use `auto` so they follow their * element's actual width. Conduct: 64px closed / 192px open / * 100vw extended (state-driven on the host). * Act: 28px collapsed / 240px expanded / 0 hidden. */ grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; overflow: hidden; position: relative; } /* Active surface — card content area */ .active-surface { grid-column: 2; grid-row: 1; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } /* Workspace-ready placeholder */ .workspace-ready { /* Pin to the centre of the active surface regardless of the * parent's flex layout (desktop overrides parent to align top-left, * which would otherwise pull this empty-state text awkwardly into * the corner). */ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; opacity: 0.45; user-select: none; pointer-events: none; text-align: center; } .ready-indicator { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .ready-text { font-size: 0.875rem; } /* ================================================================ Handedness — [data-handedness="left"] mirrors conduct/act ================================================================ */ /* Right-handed (default): Conduct=left, Act=right */ html[data-handedness="right"] .shell-body, html:not([data-handedness]) .shell-body { /* Both edge columns use `auto` to follow their element's actual * width. See .shell-body for full rationale. */ grid-template-columns: auto 1fr auto; } html[data-handedness="right"] .zone-conduct, html:not([data-handedness]) .zone-conduct { grid-column: 1; } html[data-handedness="right"] .zone-act, html:not([data-handedness]) .zone-act { grid-column: 3; } /* Left-handed: Conduct=right, Act=left */ html[data-handedness="left"] .shell-body { grid-template-columns: auto 1fr auto; } html[data-handedness="left"] .zone-conduct { grid-column: 3; } html[data-handedness="left"] .zone-act { grid-column: 1; } /* ================================================================ — top awning ================================================================ */ minxi-converse { grid-row: 1; grid-column: 1; /* Pure physical awning. The user's drag sets \`--awning-height\` * directly; the converse zone takes that height. * * Layout uses absolute positioning rather than flex so the * INSIDE PANEL has a fixed "sheet" height (= max-awning - bar) * and the converse just CLIPS that sheet from the top as the * height shrinks — like rolling up a blind. The handle (bar) * stays at the bottom edge of the converse; the panel is * absolute-positioned at top:0 / bottom:bar so its rendered * height auto-tracks (converse_height - bar_height). The * thread inside the panel has a FIXED height equal to the * sheet's full size, so when the panel shrinks it clips the * top of the thread (older messages, then the form, then * everything) — content layout doesn't reflow. * * \`overflow: visible\` lets the ring's lower half extend past * the converse's bottom edge into the workspace below; the * panel does its own clipping internally. */ position: relative; overflow: visible; height: var(--awning-height, var(--shell-converse-height)); z-index: var(--shell-z-awning); } /* The awning handle is a thick top-edge bar that fills from the * very top of the viewport down to the half-way point of the * Assistant ring. The ring sits half-embedded in the bottom edge * of the bar (top half inside the bar, bottom half hanging out * below). No line below the ring center. * * The whole 36px handle area accepts pointer-down for drag-to-open, * drag-to-resize, and drag-to-close — the bar is "thick enough to * grab" deliberately. Bar + ring share a single state colour and * breathe together so the surface feels alive at rest. */ .awning-handle { /* Pinned to the bottom of the converse zone; the bar IS the * leading edge of the awning. */ position: absolute; left: 0; right: 0; bottom: 0; /* The handle is exactly the bar — pull from anywhere on it. The * mode button (centred on the bar) has its own click handler * with stopPropagation so tapping it does not pull the bar. */ height: var(--awning-bar-height); cursor: ns-resize; user-select: none; overflow: visible; } .awning-line { position: absolute; inset: 0; /* Bar exactly fills the handle. Bar thickness = ring radius * (--awning-bar-height = --awning-ring-size / 2). Solid colour * at all times — the breathing is a colour SHIFT, not opacity. */ background: var(--awning-state-color, var(--awning-calm-tone)); transition: background var(--shell-transition); /* Thinking text slots live inside the line; no overflow, no * wrapping — truncation by JS to whole-word boundaries. */ overflow: hidden; } /* Thinking text — pale, embedded in the bar, fades in/out as * thoughts come and go. Same hue as the bar but with higher * value (mixed toward white) so it reads against the state colour * without competing for attention. Left + right slots, each * taking half the bar width. */ .awning-thought { position: absolute; top: 0; bottom: 0; width: calc(50% - 32px); /* room for the centred ring (now 64px) */ display: flex; align-items: center; /* Centre the fragment within its half — both halves are * centre-aligned so the bar reads as two balanced ambient * slots, not as a left-aligned column and a right-aligned one. */ justify-content: center; text-align: center; font-size: 11px; font-family: var(--font-base, system-ui, sans-serif); /* Italics signal "this is the assistant thinking, not the * assistant speaking" — different register from the chat * thread. Reads as inner monologue. */ font-style: italic; letter-spacing: 0.005em; white-space: nowrap; overflow: hidden; user-select: none; pointer-events: none; /* Subtle: closer in tint to the bar than to white. The mix * favours the bar colour so the text reads as a slightly-lighter * shade of the same hue — barely there but readable. */ color: color-mix(in srgb, var(--awning-state-color) 35%, white); opacity: 0; /* Asymmetric fade. The BASE rule's transition fires when the * active class is REMOVED (fading out 0.37 → 0). 7 s fade-out * (range 2.5 → 7) — gentle dissolve; thoughts linger long * after the stream falls quiet. */ transition: opacity 7000ms cubic-bezier(0.4, 0, 0.2, 1); } .awning-thought-active { /* Subtle peak — barely there. Endpoints (start of fade-in, end * of fade-out) both sit at 0. */ opacity: 0.37; /* Active rule's transition fires when the class is ADDED — the * fade-IN. 3.5 s in (range 1 → 3.5). Fast deltas never reach * peak (interrupted mid-fade); a real pause lets a fragment * settle to peak. */ transition: opacity 3500ms cubic-bezier(0.4, 0, 0.2, 1); } /* Ring centre split — both halves centre-aligned. */ .awning-thought-left { left: 12px; } .awning-thought-right { right: 12px; } /* State-dependent colour — applied to BOTH the line and the ring * outer border for a single visual signal. */ .awning-state-calm { --awning-state-color: var(--awning-calm-tone); } .awning-state-whisper { --awning-state-color: var(--awning-ring-whisper); } .awning-state-update { --awning-state-color: var(--awning-ring-update); } .awning-state-question { --awning-state-color: var(--awning-ring-question); } .awning-state-urgent { --awning-state-color: var(--awning-ring-urgent); } /* The line breathes — opacity ebbs gently. Different cadence per * state so each signal feels distinct without being shouty. */ .awning-state-calm .awning-line { animation: awning-line-breathe 5s ease-in-out infinite; } .awning-state-whisper .awning-line { animation: awning-line-shimmer 2s ease-in-out infinite; } .awning-state-update .awning-line { animation: awning-line-pulse 2.5s ease-in-out infinite; } .awning-state-question .awning-line { animation: awning-line-glow 2s ease-in-out infinite; } .awning-state-urgent .awning-line { animation: awning-line-pulse-firm 1.2s ease-in-out infinite; } /* The bar breathes by SHIFTING COLOUR between two stops of its * state hue — never by going translucent. The "inhale" stop is a * darker mix of the state colour with the body; "exhale" is a * brighter mix toward white. Each state has its own cadence so * "calm" feels different from "urgent" without needing to read * the colour name. */ @keyframes awning-line-breathe { 0%, 100% { background: color-mix(in srgb, var(--awning-state-color) 75%, var(--background-end)); } 50% { background: color-mix(in srgb, var(--awning-state-color) 92%, white); } } @keyframes awning-line-shimmer { 0%, 100% { background: color-mix(in srgb, var(--awning-state-color) 80%, white); } 50% { background: color-mix(in srgb, var(--awning-state-color) 70%, var(--background-end)); } } @keyframes awning-line-pulse { 0%, 100% { background: color-mix(in srgb, var(--awning-state-color) 85%, var(--background-end)); } 50% { background: color-mix(in srgb, var(--awning-state-color) 95%, white); } } @keyframes awning-line-glow { 0%, 100% { background: color-mix(in srgb, var(--awning-state-color) 80%, var(--background-end)); } 50% { background: color-mix(in srgb, var(--awning-state-color) 100%, transparent); } } @keyframes awning-line-pulse-firm { 0%, 100% { background: color-mix(in srgb, var(--awning-state-color) 90%, var(--background-end)); } 50% { background: color-mix(in srgb, var(--awning-state-color) 100%, white); } } /* The Mode button sits centred on the bar — the only interactive * element pinned in the awning's closed-state surface. Tapping it * cycles between Text mode (default, calm, written interaction) * and Handsfree mode (Siri-style continuous voice in/out, used * when the user wants to talk to the workspace from across the * room). */ .awning-mode-btn { position: absolute; left: 50%; /* Ring is centred VERTICALLY on the bar's bottom edge so the * top half of the ring sits inside the bar and the bottom half * hangs below into the workspace. \`top: 100%\` puts the ring's * vertical centre at the bar's bottom; transform y -50% offsets * it back up by half its own height so the centre lands exactly * on the bar's bottom edge. */ top: 100%; transform: translate(-50%, -50%); width: var(--awning-ring-size); height: var(--awning-ring-size); padding: 0; margin: 0; background: transparent; border: none; cursor: pointer; display: block; z-index: 1; } .awning-mode-btn:focus-visible { outline: 2px solid var(--awning-state-color); outline-offset: 3px; border-radius: 50%; } /* Assistant ring — centred inside the mode button. Pure CSS. */ .awning-ring { position: absolute; inset: 4px; width: auto; height: auto; border-radius: 50%; pointer-events: none; /* the button catches the click */ } /* Mode-state glyph inside the ring (small, centred, glyph differs * by mode). Text mode shows nothing (clean ring). Handsfree mode * overlays a small soundwave glyph so the active mode is glanceable. */ .ring-mode-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* Show only the current-mode icon; hide the other. \`currentColor\` * on the SVG strokes picks up whatever the parent's text colour * is — the awning's state colour propagates here. */ color: var(--awning-state-color, var(--text-on-accent)); font-size: 12px; font-weight: 600; color: var(--text-on-accent, #fff); pointer-events: none; user-select: none; letter-spacing: -0.05em; } /* Inline SVGs for the two modes — the icon shown represents the * CURRENT mode (not the toggle target). Sized to fit comfortably * inside the ring. Both icons inherit \`currentColor\`. */ .mode-icon { width: 22px; height: 22px; display: none; } [data-awning-mode-btn][data-mode="quiet"] .mode-icon-quiet { display: block; } [data-awning-mode-btn][data-mode="handsfree"] .mode-icon-handsfree { display: block; } /* Legacy 'text' value (migrated to 'quiet' but might persist in * a stale localStorage) maps to the same icon as 'quiet'. */ [data-awning-mode-btn][data-mode="text"] .mode-icon-quiet { display: block; } /* Handsfree state lights the ring outer with the accent — a clear * visual signal "this surface is listening / will speak". */ [data-awning-mode-btn][data-mode="handsfree"] .ring-outer { border-color: var(--accent-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 35%, transparent); } .ring-outer { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--awning-state-color, var(--awning-calm-tone)); background: var(--background-end, #0d001c); transition: border-color var(--shell-transition); } .ring-inner { position: absolute; inset: 5px; border-radius: 50%; background: var(--awning-state-color, var(--awning-ring-calm)); transition: background var(--shell-transition); /* Always breathing — alive even at rest. Different feel per state. */ animation: ring-breathe 4s ease-in-out infinite; } .awning-state-update .ring-inner { animation: ring-breathe 2.5s ease-in-out infinite; } .awning-state-question .ring-inner { animation: ring-breathe 2s ease-in-out infinite; } .awning-state-urgent .ring-inner { animation: ring-breathe 1.2s ease-in-out infinite; } /* Subtle pending-count badge inside the ring. Hidden by default; * shown when a producer fires `minxi:awning-pending-count`. */ .ring-counter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; font-family: var(--font-base, system-ui, sans-serif); color: var(--text-on-accent, #fff); letter-spacing: -0.02em; pointer-events: none; text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); } .ring-counter[hidden] { display: none; } /* Ring breathes alongside the bar — bigger amplitude so the signal * reads at a glance: the inner disc grows + glows, then settles. */ @keyframes ring-breathe { 0%, 100% { transform: scale(0.92); opacity: 0.8; box-shadow: 0 0 0 0 transparent; } 50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 16px 2px color-mix(in srgb, var(--awning-state-color) 50%, transparent); } } .awning-name { font-size: 0.8rem; font-weight: 500; opacity: 0.7; flex: 1; } /* Awning panel (conversation) */ /* Clip wrapper — sits between the converse zone and the panel. * The converse keeps overflow:visible so the ring's lower half * can hang below into the workspace; this clip-container has * overflow:hidden so the panel content (which has a FIXED full * sheet height) is clipped at the converse's top edge as the * awning shrinks. */ .awning-clip { position: absolute; left: 0; right: 0; top: 0; bottom: var(--awning-bar-height); overflow: hidden; } .awning-panel { /* Fixed-height sheet, anchored at the BOTTOM of the clip * wrapper. As the awning shrinks, the clip wrapper shrinks too, * and the panel's TOP is clipped — exactly the "sheet of paper * being pushed up" model. The form sits at the bottom of the * sheet (last flex child), the thread fills above; both scroll * off the top together as the awning shrinks. */ position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--awning-max-height, 100dvh) - var(--awning-bar-height)); display: flex; flex-direction: column; background: var(--surface); } .awning-panel[hidden] { display: none; } /* The awning panel no longer renders a header — title + mute + close * were all redundant. Mute lives off the mode toggle (Handsfree off * = effectively muted); the awning is "closed" by pulling the bar * back to its minimum height. */ /* Header hover rule retired — header is gone. */ .awning-thread { /* Takes the available space above the form. Pinning the latest * message to the bottom uses the pseudo-spacer pattern (see * .awning-thread::before) rather than \`justify-content: * flex-end\` — the latter creates an overflow trap where the * top of the content becomes unreachable as soon as it * exceeds the container. overflow-y:auto can then scroll * through long histories. */ flex: 1; min-height: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; overflow-y: auto; } .awning-thread::before { /* Spacer that consumes any extra space ABOVE the messages so * they hug the bottom of the thread. \`flex: 1 1 0\` means * grow:1 / shrink:1 / basis:0 — collapses cleanly to 0 once * messages exceed the container height, so overflow-y:auto * engages normally and the user can scroll back through the * full history. */ content: ''; flex: 1 1 0; } .awning-form { /* Fixed size at the bottom of the panel — sibling of the * thread, last flex child of the panel. flex-shrink:0 keeps it * full size as the awning shrinks; the panel's clip then * sweeps the form off the top along with the messages. */ flex-shrink: 0; } /* Stark chat blocks — no bubbles, no rounded borders, no margins, * no gaps. Each message is a FULL-WIDTH block flush against its * neighbours; the BACKGROUND is the only thing distinguishing * user vs assistant, and the TEXT-ALIGN distinguishes who wrote * which. */ .awning-message { width: 100%; max-width: 100%; margin: 0; padding: 14px 16px; border-radius: 0; border: none; font-size: 14px; line-height: 1.5; box-sizing: border-box; } .awning-message-user { /* Recessed dark — same family as the input textarea's deep * surface; this is the user's own writing reflected back, so * it deserves a quieter visual register. */ background: var(--surface-deep); color: var(--text-secondary); text-align: right; } .awning-message-assistant { /* Brighter raised surface; the assistant's reply is the * reading-priority block. Full-contrast text. */ background: var(--surface-raised); color: var(--text-primary); text-align: left; } .message-text.streaming::after { content: '▌'; animation: blink 1s step-end infinite; } /* Markdown-rendered chat content — keep the stark architectural * vibe: sharp corners, hairline rules, monospace for code. */ .message-text p { margin: 0 0 0.75em; } .message-text p:last-child { margin-bottom: 0; } .message-text h1, .message-text h2, .message-text h3, .message-text h4, .message-text h5, .message-text h6 { margin: 0.75em 0 0.4em; font-weight: 600; line-height: 1.25; } .message-text h1 { font-size: 1.25em; } .message-text h2 { font-size: 1.15em; } .message-text h3 { font-size: 1.05em; } .message-text h4, .message-text h5, .message-text h6 { font-size: 1em; } .message-text strong { font-weight: 700; } .message-text em { font-style: italic; } .message-text a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; } .message-text a:hover { text-decoration-thickness: 2px; } .message-text code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.92em; padding: 1px 4px; background: var(--surface-deep); border-radius: 0; } .message-text pre { margin: 0.5em 0; padding: 12px; background: var(--surface-deep); border-left: 2px solid var(--border-medium); overflow-x: auto; border-radius: 0; } .message-text pre code { display: block; padding: 0; background: transparent; font-size: 0.9em; line-height: 1.45; } .message-text ul, .message-text ol { margin: 0.4em 0; padding-left: 1.6em; } .message-text li { margin: 0.15em 0; } .message-text blockquote { margin: 0.5em 0; padding: 4px 12px; border-left: 2px solid var(--border-medium); color: var(--text-secondary); } .message-text hr { margin: 0.75em 0; border: 0; border-top: 1px solid var(--border-medium); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Input form — multi-line textarea filling the bottom of the * panel, with a small square submit button overlaid at the * top-right that's only visible when the input is focused or the * user mouses over the area. Enter submits, Shift+Enter inserts a * newline. */ .awning-form { position: relative; display: block; border-top: 1px solid var(--border-soft); margin: 0; padding: 0; /* Drives the textarea right-padding AND the send-button width * (which has aspect-ratio: 1, so width = height). The send * button is flush top/right/bottom; this is its target square * size. */ --awning-send-size: 80px; } .awning-input { display: block; width: 100%; min-height: 5em; /* about three lines tall */ /* Right padding reserves space for the square send button — * which is flush top/right/bottom and width = height. */ padding: 12px var(--awning-send-size, 80px) 12px 14px; border: none; background: transparent; color: var(--text-primary); font-family: inherit; font-size: 14px; line-height: 1.45; resize: none; outline: none; box-sizing: border-box; margin: 0; border-radius: 0; } .awning-input::placeholder { color: var(--text-muted); } .awning-input:focus { outline: none; } .awning-send { /* Flush top / right / bottom — fills the full form height. The * \`aspect-ratio: 1\` makes the width track the height so the * button is always a true square at any form size. */ position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1; width: auto; /* CSS var lets us keep .awning-input padding in sync. */ --awning-send-size: 80px; background: var(--accent-primary); color: var(--text-on-accent, #fff); border: none; border-radius: 0; cursor: pointer; opacity: 0; transition: opacity 200ms ease; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } /* Send-button visibility ladder — only ever shown when the * textarea has typed content. \`:placeholder-shown\` is true when * the textarea is empty; \`:not(:placeholder-shown)\` matches once * the user has typed. Sibling combinator \`~\` reaches the send * button (DOM order: textarea → button). * * Three tiers when content is present: * 0.45 visible state — form hover or textarea focus (tells * the user "you can press this to send") * 0.70 hovered state — direct cursor on the button * 0.95 active state — pressed (mouse-down / keyboard activate) */ .awning-form:hover .awning-input:not(:placeholder-shown) ~ .awning-send, .awning-form:focus-within .awning-input:not(:placeholder-shown) ~ .awning-send { opacity: 0.45; } .awning-input:not(:placeholder-shown) ~ .awning-send:hover, .awning-input:not(:placeholder-shown) ~ .awning-send:focus-visible { opacity: 0.7; outline: none; } .awning-input:not(:placeholder-shown) ~ .awning-send:active { opacity: 0.95; } .awning-send:disabled { opacity: 0.15 !important; cursor: not-allowed; } /* While the user is actively grabbing the bar, ensure no * unintended text selection or pointer-cursor behaviour bleeds * into the rest of the page. */ minxi-converse.awning-dragging { user-select: none; cursor: grabbing; } /* Short transition for click / double-click / flick snaps so the * awning eases into its new height instead of teleporting. * Applied as a transient class by #setHeightTo({ animated: true }) * and removed 240 ms later. Drag (no class) stays instant. */ minxi-converse.awning-snapping { transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================================ — left edge ================================================================ */ minxi-conduct { /* Horizontal card-type drawer pulling out from the LEFT edge. * Mirror of the assistant awning: \`--conduct-width\` is the * variable the JS sets on the host during drag; otherwise the * width is driven by the \`[data-state]\` attribute which the * JS toggles between 'closed' / 'open' / 'extended'. The * drawer is vertically centred and only as tall as the 7-row * icon grid + padding — not the whole viewport. The HANDLE * is a sibling of the drawer (not a child) so the drawer can * \`overflow: hidden\` to clip off-screen icon columns while * the handle stays visible and clickable, protruding into the * workspace from the drawer's right edge. */ grid-row: 1; display: block; overflow: visible; position: relative; padding: 0; /* The host width matches the drawer width so the act surface * follows the drawer state. The handle is absolute-positioned * relative to the host. */ width: var(--conduct-width, var(--conduct-width-closed)); align-self: center; background: transparent; /* Card controller sits above the per-card act zone, belong * toolbar, and cards — but always below the assistant awning. */ z-index: var(--shell-z-conduct); } .conduct-drawer { position: relative; background: var(--surface); border-right: 1px solid var(--border-medium); /* Same width as the host (the host width drives this; both * are state-driven via --conduct-width). */ width: 100%; display: flex; flex-direction: row; align-items: stretch; /* CLIP — when closed/open, the icon columns that fall outside * the visible width are hidden. The handle is a sibling of * the drawer, not a child, so this overflow doesn't affect * its visibility. */ overflow: hidden; } /* State widths — IDENTICAL across all form factors. Drag overrides * via inline --conduct-width. */ :root { --conduct-icon-size: 64px; --conduct-icon-gap: 0px; --conduct-grid-pad: 0px; --conduct-handle-size: 64px; /* CLOSED: 64px. Drawer is the width of a single icon column / * handle diameter. The handle button is right-aligned inside the * drawer; the C-shape occupies the rightmost 32px (curve facing * left, flat edge flush with the drawer's right edge); the left * 32px of the handle row is intentionally empty. */ --conduct-width-closed: 64px; /* OPEN: 192px (3 columns × 64px, edge-to-edge). */ --conduct-width-open: calc(3 * var(--conduct-icon-size)); } /* Drive width on the HOST (not the drawer); the drawer is 100% of * the host, the handle is positioned at the host's right edge. */ minxi-conduct[data-state="closed"] { width: var(--conduct-width-closed); } minxi-conduct[data-state="open"] { width: var(--conduct-width-open); } minxi-conduct[data-state="extended"] { width: 100vw; } /* Snap animation (only applied transiently by JS during state * changes; plain drag stays instant). */ minxi-conduct.conduct-snapping { transition: width 200ms cubic-bezier(0.2, 0, 0, 1); } /* Suppress text selection / cursor flicker while the user is * actively dragging the handle. */ minxi-conduct.conduct-dragging { user-select: none; cursor: ew-resize; } /* ---- The icon grid (always in the DOM; rendered cells outside the * visible width are clipped by the drawer's overflow). ---- */ .conduct-grid { display: grid; grid-template-columns: repeat(3, var(--conduct-icon-size)); grid-template-rows: repeat(7, var(--conduct-icon-size)); column-gap: var(--conduct-icon-gap); row-gap: var(--conduct-icon-gap); padding: var(--conduct-grid-pad); flex: 0 0 auto; /* Force the grid to be exactly 3 cols × 7 rows of icon-sized * cells regardless of which cells are actually populated. * Without this, row 4 (the handle row) collapses to 0 because * no icons are placed there, eliminating the 3+3 visual * separation the user expects. */ width: calc( 3 * var(--conduct-icon-size) + 2 * var(--conduct-icon-gap) + 2 * var(--conduct-grid-pad) ); min-height: calc( 7 * var(--conduct-icon-size) + 6 * var(--conduct-icon-gap) + 2 * var(--conduct-grid-pad) ); /* When extended, the grid sits at the RIGHT of the drawer (its * natural position); the search panel takes the rest. */ margin-left: auto; } /* CLOSED state: collapse the grid to a single visible column (col 3, * which holds the 6 priority icons placed by shell.js). Cols 1 and 2 * exist in the DOM but have zero width and their icons are hidden, * so the grid is exactly drawer-wide and col 3 sits flush at x=0..64 * inside the visible drawer. */ minxi-conduct[data-state="closed"] .conduct-grid { grid-template-columns: 0 0 var(--conduct-icon-size); width: var(--conduct-icon-size); } minxi-conduct[data-state="closed"] .conduct-icon[data-col="1"], minxi-conduct[data-state="closed"] .conduct-icon[data-col="2"] { display: none; } /* Individual card-type icon button. Sharp corners, hairline * border, accent on hover. */ .conduct-icon { width: var(--conduct-icon-size); height: var(--conduct-icon-size); background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 0; padding: 0; margin: 0; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .conduct-icon:hover { background: var(--surface-raised); border-color: var(--border-medium); color: var(--text-primary); } .conduct-icon:focus-visible { outline: 1px solid var(--accent-primary); outline-offset: -1px; } .conduct-icon-glyph { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 28px; line-height: 1; pointer-events: none; } /* Icons inherit their emoji glyph from the existing card-type-icon * mapping (defined elsewhere in shell.css) by reusing the * \`data-icon\` attribute lookups. Bridge those onto the * \`.conduct-icon-glyph[data-icon]\` selector. */ /* P0 launch set (SPEC §8.1) */ .conduct-icon-glyph[data-icon="note"]::before { content: '📝'; } .conduct-icon-glyph[data-icon="document"]::before { content: '📄'; } .conduct-icon-glyph[data-icon="email"]::before { content: '✉️'; } .conduct-icon-glyph[data-icon="calendar-event"]::before { content: '📅'; } .conduct-icon-glyph[data-icon="reminder"]::before { content: '🔔'; } .conduct-icon-glyph[data-icon="contact"]::before { content: '👤'; } .conduct-icon-glyph[data-icon="approval"]::before { content: '✅'; } .conduct-icon-glyph[data-icon="file"]::before { content: '📎'; } .conduct-icon-glyph[data-icon="image-studio"]::before { content: '🎨'; } .conduct-icon-glyph[data-icon="search-results"]::before { content: '🔍'; } .conduct-icon-glyph[data-icon="chat"]::before { content: '💬'; } .conduct-icon-glyph[data-icon="link"]::before { content: '🔗'; } /* P1 fast-follow (SPEC §8.2) */ .conduct-icon-glyph[data-icon="sms"]::before { content: '📱'; } .conduct-icon-glyph[data-icon="voice-call"]::before { content: '📞'; } .conduct-icon-glyph[data-icon="spreadsheet"]::before { content: '📊'; } .conduct-icon-glyph[data-icon="form"]::before { content: '📋'; } .conduct-icon-glyph[data-icon="checklist"]::before { content: '☑️'; } .conduct-icon-glyph[data-icon="audio-studio"]::before { content: '🎵'; } .conduct-icon-glyph[data-icon="translation"]::before { content: '🌐'; } .conduct-icon-glyph[data-icon="payment"]::before { content: '💳'; } .conduct-icon-glyph[data-icon="invoice"]::before { content: '🧾'; } .conduct-icon-glyph[data-icon="receipt"]::before { content: '🧮'; } .conduct-icon-glyph[data-icon="calendar-agenda"]::before { content: '📆'; } .conduct-icon-glyph[data-icon="project"]::before { content: '📁'; } .conduct-icon-glyph[data-icon="pipeline-run"]::before { content: '⚙️'; } .conduct-icon-glyph[data-icon="service-card"]::before { content: '🛎️'; } .conduct-icon-glyph[data-icon="team"]::before { content: '👥'; } /* P2 and beyond (SPEC §8.3) */ .conduct-icon-glyph[data-icon="video-studio"]::before { content: '🎬'; } .conduct-icon-glyph[data-icon="marketplace-browse"]::before { content: '🛍️'; } .conduct-icon-glyph[data-icon="onboarding"]::before { content: '👋'; } .conduct-icon-glyph[data-icon="skill"]::before { content: '⭐'; } .conduct-icon-glyph[data-icon="recipe"]::before { content: '📜'; } .conduct-icon-glyph[data-icon="server"]::before { content: '🖥️'; } .conduct-icon-glyph[data-icon="sponsorship-offers"]::before { content: '🎁'; } /* Belong-bar card types (workspace-internal, see _p1-p2-stubs.js) */ .conduct-icon-glyph[data-icon="user-profile"]::before { content: '👤'; } .conduct-icon-glyph[data-icon="user-settings"]::before { content: '🎛️'; } .conduct-icon-glyph[data-icon="organization"]::before { content: '🏢'; } .conduct-icon-glyph[data-icon="org-switcher"]::before { content: '🔀'; } .conduct-icon-glyph::before { content: '◆'; /* fallback for unknown types */ } /* ---- The handle: semi-circle on the right edge of the drawer, * vertically centred. Outer half-ring + air-gap + inner * half-disc. The handle occupies the middle row of the * rightmost grid column visually, taking the space of the * "missing" icon there. Half of the handle is inside the * drawer, the other half protrudes into the workspace. ---- */ .conduct-handle { position: absolute; top: 50%; /* Button sits ENTIRELY inside the drawer; its right edge aligns * with the drawer's right edge so the whole click target stays * within the visible drawer bounds. The visible C-shape occupies * the RIGHT half of the button (drawer's rightmost 32px); the * left half of the button is the empty space the user requested * to the left of the handle's curve. */ right: 0; transform: translateY(-50%); width: var(--conduct-handle-size); height: var(--conduct-handle-size); padding: 0; margin: 0; background: transparent; border: none; cursor: ew-resize; z-index: 1; } .conduct-handle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: 50%; } /* The semi-circle: only the RIGHT half of the handle box is visible, * giving a "C" shape — curve faces left, flat edge on the right * (flush with the drawer's right edge, since the handle button is * anchored at \`right: 0\` inside the drawer). The button itself is * a full square; the inner shapes occupy the right half only. */ .handle-outer, .handle-inner { position: absolute; top: 0; right: 0; height: 100%; /* Right half of the handle box. */ width: 50%; border-radius: 999px 0 0 999px; pointer-events: none; } .handle-outer { /* 2 px ring on the RIGHT half. */ background: transparent; border: 2px solid var(--text-secondary); border-right: none; /* flat on the drawer-edge side */ } .handle-inner { /* Filled crescent inset from the outer ring by an air gap. * `right: 0` is inherited; the curve-side air gap comes from * \`width: calc(50% - gap)\`, which pulls the left edge inward. */ --handle-gap: 5px; top: var(--handle-gap); width: calc(50% - var(--handle-gap)); height: calc(100% - 2 * var(--handle-gap)); background: var(--text-secondary); } .conduct-handle:hover .handle-outer { border-color: var(--text-primary); } .conduct-handle:hover .handle-inner { background: var(--text-primary); } /* ---- Search panel (only when state = extended) ---- */ .conduct-search { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border-soft); padding: 12px; gap: 8px; } .conduct-search[hidden] { display: none; } minxi-conduct[data-state="extended"] .conduct-search { display: flex; } minxi-conduct[data-state="extended"] .conduct-search[hidden] { display: flex; } .conduct-search-input { width: 100%; background: var(--surface-deep); border: 1px solid var(--border-medium); border-radius: 0; padding: 10px 12px; color: var(--text-primary); font-family: inherit; font-size: 14px; outline: none; } .conduct-search-input:focus { border-color: var(--accent-primary); } .conduct-search-input::placeholder { color: var(--text-muted); } .conduct-search-results { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .conduct-search-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: transparent; border: none; border-bottom: 1px solid var(--border-soft); border-radius: 0; color: var(--text-primary); font-size: 14px; text-align: left; cursor: pointer; } .conduct-search-item:hover { background: var(--hover-bg); } .conduct-search-item:focus-visible { outline: 1px solid var(--accent-primary); outline-offset: -1px; } .conduct-search-item .conduct-icon-glyph { width: 24px; height: 24px; font-size: 18px; } /* Residual classes from the previous palette — kept as no-ops so * nothing breaks if a stray reference exists elsewhere. */ .now-stack-indicator, .stack-peek, .stack-face, .card-type-menu, .card-type-grid, .card-type-item, .conduct-strip, .conduct-drawer-toggle, .conduct-chevron, .conduct-add-btn { display: none !important; } .face-title { font-size: 0.55rem; padding: 2px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 36px; } .no-cards { font-size: 0.6rem; opacity: 0.5; text-align: center; padding: 4px; } /* Card-type drawer — slides out to the right from the conduct * column (or to the left for left-handed). Sharp edges, hairline * borders, fixed width sized to the card-type icons. Anchored to * the conduct zone's right edge at the toggle's vertical line. */ .card-type-menu { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); z-index: var(--shell-z-menus); background: var(--surface); border: 1px solid var(--border-medium); border-radius: 0; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 200px; } html[data-handedness="left"] .card-type-menu { left: auto; right: 100%; } .card-type-menu[hidden] { display: none; } .card-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .card-type-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; font-size: 0.75rem; color: var(--text-primary); transition: background var(--shell-transition), border-color var(--shell-transition); } .card-type-item:hover, .card-type-item:focus-visible { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent); outline: none; } .card-type-label { text-align: center; color: var(--text-secondary); line-height: 1.2; } .card-type-empty { font-size: 0.8rem; color: var(--text-tertiary); margin: 0; padding: 4px 0; } /* Card-type icons + toolbar action icons render the per-icon * glyph as emoji content via attribute selectors. Until the * design system ships real SVG sprites, emoji give every card * type a visually-distinct affordance instead of the previous * faded-square placeholder (which read as light-on-light on the * dark menu surface). */ .card-type-icon, .action-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 20px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif; flex-shrink: 0; } .card-type-icon::before, .action-icon::before { content: '◆'; } /* Card-identity icons (12 P0 types — see cards//definition.js). * `data-icon` falls through to the type name when identity() doesn't * declare its own icon field, so map by type. */ .card-type-icon[data-icon="note"]::before { content: '📝'; } .card-type-icon[data-icon="document"]::before { content: '📄'; } .card-type-icon[data-icon="email"]::before { content: '✉️'; } .card-type-icon[data-icon="calendar-event"]::before { content: '📅'; } .card-type-icon[data-icon="reminder"]::before { content: '🔔'; } .card-type-icon[data-icon="contact"]::before { content: '👤'; } .card-type-icon[data-icon="approval"]::before { content: '✅'; } .card-type-icon[data-icon="file"]::before { content: '📎'; } .card-type-icon[data-icon="image-studio"]::before { content: '🎨'; } .card-type-icon[data-icon="search-results"]::before { content: '🔍'; } .card-type-icon[data-icon="chat"]::before { content: '💬'; } .card-type-icon[data-icon="link"]::before { content: '🔗'; } /* Toolbar-action icons */ .action-icon[data-icon="save"]::before { content: '💾'; } .action-icon[data-icon="send"]::before { content: '➤'; } .action-icon[data-icon="trash"]::before { content: '🗑'; } .action-icon[data-icon="sparkle"]::before { content: '✨'; } .action-icon[data-icon="extract"]::before { content: '⛏'; } .action-icon[data-icon="translate"]::before { content: '🌐'; } .action-icon[data-icon="share"]::before { content: '↗'; } .action-icon[data-icon="clock"]::before { content: '⏱'; } .action-icon[data-icon="phone"]::before { content: '📞'; } .action-icon[data-icon="video-camera"]::before { content: '📹'; } .action-icon[data-icon="bell-slash"]::before { content: '🔕'; } .action-icon[data-icon="bell"]::before { content: '🔔'; } .action-icon[data-icon="more"]::before { content: '⋯'; } .action-icon[data-icon="xmark-circle"]::before { content: '✕'; } .action-icon[data-icon="checkmark-circle"]::before { content: '✓'; } .action-icon[data-icon="chat-plus"]::before { content: '💬'; } .action-icon[data-icon="archive"]::before { content: '📦'; } /* ================================================================ TASK-110: Phone shell (canonical) Left-edge conduct, right-edge act, top-awning converse, bottom-centre belong. One active card, up to 20 in now-stack. Intent dot in opposite-of-conduct corner per handedness. ================================================================ */ minxi-shell[data-form-factor="phone"] { grid-template-rows: var(--shell-converse-height) 1fr var(--shell-belong-height); grid-template-columns: 1fr; touch-action: pan-y; /* allow vertical scroll in stack */ } minxi-shell[data-form-factor="phone"] minxi-conduct { /* Width is driven by [data-state]; do not override here. */ touch-action: pan-y pan-x; } minxi-shell[data-form-factor="phone"] .stack-face { width: 40px; height: 40px; } /* Phone: toolbar max 5, overflow opens upward */ minxi-shell[data-form-factor="phone"] .overflow-panel { bottom: 100%; top: auto; } /* Phone: primary toolbar button is larger */ minxi-shell[data-form-factor="phone"] .toolbar-btn.primary { width: 52px; height: 52px; } /* ================================================================ TASK-111: Tablet portrait — stack-peek column 3-4 card faces visible above/below the conduct control. ================================================================ */ /* Tablet conduct: dimensions are uniform across form factors and * driven by [data-state] on the host. Nothing to override here. */ /* Tablet portrait: peek column shows 3-4 faces */ minxi-shell[data-form-factor="tablet-portrait"] .stack-peek { max-height: calc(4 * 48px + 3 * 3px); overflow: hidden; } minxi-shell[data-form-factor="tablet-portrait"] .stack-face { width: 48px; height: 48px; } /* Tablet portrait: stack-peek column is always-on (data-peek-visible) */ minxi-shell[data-form-factor="tablet-portrait"] .stack-peek { display: flex; } /* ================================================================ TASK-112: Tablet landscape — two-card split Primary (active) + secondary (peek) cards visible. Right-edge toolbar follows focus. Awning is full-width. ================================================================ */ minxi-shell[data-form-factor="tablet-landscape"] { --shell-split-secondary-width: 320px; } /* Tablet landscape: active surface split to show primary + secondary */ minxi-shell[data-form-factor="tablet-landscape"] .active-surface { display: grid; grid-template-columns: 1fr var(--shell-split-secondary-width); gap: 8px; } /* Secondary card slot (peek) in landscape split */ minxi-shell[data-form-factor="tablet-landscape"] .active-surface .split-secondary { overflow: hidden; border-left: 1px solid var(--border-color, #e2e8f0); display: flex; align-items: stretch; } /* Awning spans full width on tablet landscape */ minxi-shell[data-form-factor="tablet-landscape"] minxi-converse { grid-column: 1 / -1; } minxi-shell[data-form-factor="tablet-landscape"] .stack-face { width: 48px; height: 48px; } /* Act toolbar follows focus — floats right of focused card slot */ minxi-shell[data-form-factor="tablet-landscape"] minxi-act { position: relative; } /* ================================================================ TASK-113: Laptop — persistent left stack column + top ribbon awning ⌘K opens awning; ⌘1..9 jump to nth card; ⌘⏎ fires primary action ================================================================ */ /* Laptop/desktop conduct: dimensions are uniform across form factors * and driven by [data-state] on the host. Nothing to override here. */ minxi-shell[data-form-factor="laptop"] .stack-face, minxi-shell[data-form-factor="desktop"] .stack-face { width: 64px; height: 64px; } /* Laptop: awning becomes persistent top ribbon */ minxi-shell[data-form-factor="laptop"] minxi-converse { height: var(--shell-converse-height); overflow: visible; /* ribbon is always open */ /* No bottom border — the awning bar IS the bottom edge. */ } /* Laptop: stack column has larger face + label */ minxi-shell[data-form-factor="laptop"] .stack-face { flex-direction: column; justify-content: center; font-size: 0.65rem; } /* Laptop: Belong glyph in top-left corner (overrides bottom-centre) */ minxi-shell[data-form-factor="laptop"] minxi-belong { display: flex; align-items: center; justify-content: center; } /* Laptop: keyboard shortcut badge on stack faces */ minxi-shell[data-form-factor="laptop"] .stack-face::after { content: attr(data-kbd-index); position: absolute; top: 2px; right: 2px; font-size: 0.5rem; opacity: 0.4; font-variant-numeric: tabular-nums; } minxi-shell[data-form-factor="laptop"] .stack-face { position: relative; } /* ================================================================ TASK-114: Desktop multi-monitor — spatial board Persistent positions in localStorage. Drag-to-teleport. ================================================================ */ minxi-shell[data-form-factor="desktop"] { --shell-board-gap: 16px; } /* Desktop: active surface becomes spatial board */ minxi-shell[data-form-factor="desktop"] .active-surface { position: relative; overflow: auto; align-items: flex-start; justify-content: flex-start; padding: var(--shell-board-gap); } /* Desktop: board cards have absolute positioning */ minxi-shell[data-form-factor="desktop"] .active-surface .board-card { position: absolute; min-width: 320px; min-height: 200px; resize: both; overflow: auto; background: var(--surface, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: grab; } minxi-shell[data-form-factor="desktop"] .active-surface .board-card:active { cursor: grabbing; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 10; } /* Desktop: now-stack lane is left column (conduct zone). Keep * overflow visible so the card-type menu (positioned at * \`left: 100%\` — just outside the column) isn't clipped when it * opens. Scrolling for a long stack is handled inside * \`.now-stack-indicator\`, not on the conduct zone itself. */ minxi-shell[data-form-factor="desktop"] minxi-conduct { /* Width is driven by [data-state]; do not override here. */ overflow: visible; } minxi-shell[data-form-factor="desktop"] .now-stack-indicator, minxi-shell[data-form-factor="laptop"] .now-stack-indicator { overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 200px); } /* Desktop: awning ribbon (dockable) */ minxi-shell[data-form-factor="desktop"] minxi-converse { overflow: visible; /* No bottom border — the awning bar IS the bottom edge. */ } /* Desktop: floating awning panel when undocked */ .awning-float-panel { position: fixed; top: 8px; right: 16px; min-width: 360px; max-width: 480px; background: var(--surface, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: var(--shell-z-awning); resize: both; overflow: auto; } /* Desktop: multi-card focus highlight */ minxi-shell[data-form-factor="desktop"] .board-card.board-focused { border-color: var(--primary, #6366f1); border-width: 2px; box-shadow: 0 4px 16px rgba(99,102,241,0.2); } /* Desktop: drag-to-teleport drop target */ minxi-shell[data-form-factor="desktop"] .board-card.drag-teleport-target { border-color: var(--awning-ring-update, #34d399); background: color-mix(in srgb, var(--awning-ring-update, #34d399) 8%, var(--surface, #fff)); } /* ================================================================ — right edge ================================================================ */ minxi-act { grid-row: 1; display: flex; flex-direction: column; align-items: stretch; overflow: visible; padding: 0; position: relative; } /* See the act-inner block further down (next to ) * for the canonical layout — flex column that fills the act zone * height and pivots intent-dot placement on the manifest. */ .toolbar-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; } .toolbar-btn { width: 44px; height: 44px; border: none; border-radius: 12px; background: var(--surface-alt, #f1f5f9); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: background var(--shell-transition), transform var(--shell-transition); } .toolbar-btn:hover { background: var(--hover-bg, #e2e8f0); transform: scale(1.05); } .toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .toolbar-btn.primary { width: 48px; height: 48px; background: var(--primary, #6366f1); color: white; } .toolbar-btn.primary:hover { background: var(--primary-hover, #4f46e5); } .toolbar-btn.destructive { color: var(--error, #ef4444); } .action-icon { width: 20px; height: 20px; border-radius: 4px; background: currentColor; opacity: 0.6; display: block; } .action-label { font-size: 0.65rem; margin-top: 2px; } .action-badge { position: absolute; top: 4px; right: 4px; background: var(--error, #ef4444); color: white; border-radius: 10px; font-size: 0.6rem; padding: 1px 4px; min-width: 16px; text-align: center; line-height: 1.4; } .overflow-panel { position: absolute; bottom: 100%; right: 0; z-index: var(--shell-z-menus); background: var(--surface, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 8px; box-shadow: 0 -4px 16px rgba(0,0,0,0.1); min-width: 160px; display: flex; flex-direction: column; gap: 4px; } .overflow-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: none; border-radius: 8px; background: none; cursor: pointer; font-size: 0.8rem; text-align: left; transition: background var(--shell-transition); } .overflow-item:hover { background: var(--hover-bg, #f1f5f9); } .overflow-item.destructive { color: var(--error, #ef4444); } /* Laptop/desktop: floating toolbar */ /* Slide-out widths are applied via .act-collapsed / .act-expanded * elsewhere in this file — no fixed width here. */ /* ================================================================ — bottom logo zone ================================================================ */ minxi-belong { /* Belong-bar redesign: a 3×3 grid of 64 px cells. Closed state * = 64 × 64 (only the central icon shows). Open state = 192 × * 192 (all 9 cells). The central icon is the BOTTOM-MIDDLE * cell and is anchored — its viewport position is identical in * both states (the bar grows UP and LEFT/RIGHT from there). * The host is `overflow: visible` so the bar can extend upward * past the 64 px belong row when open. * * Grid layout (open): * * [org-switcher] [user-profile ] [docs] * [alt-org ] [user-settings] [community] * [current-org ] [central icon ] [admin] * * Left + middle columns are workspace-bound (spawn cards or * direct-nav). Right column is plain `` * external links — admin / docs / community — overridable by * Enterprise Pack branding via `ecosystem_links`. */ grid-row: 3; display: flex; align-items: flex-end; justify-content: center; padding: 0; position: relative; overflow: visible; } /* The bar — pure positioning container. NO background, NO border, * NO border-radius, NO shadow on the bar itself. The cells inside * provide their own flat surfaces (matching the conduct drawer's * aesthetic: drawer is the wrapper, icons are flat tiles). * * The bar is `position: absolute` anchored to the host's * bottom-centre. The central icon is in turn `position: absolute` * inside the bar (NOT in the grid flow), pinned to the bar's * bottom-centre — so the icon's viewport position is pixel-stable * throughout the closed↔open transition: the bar's bottom-centre * stays put, the icon's bottom-centre stays glued to it. The * 3 × 3 grid below holds the 8 surrounding cells; row 3 col 2 is * left unassigned in the grid (the absolutely-positioned central * icon overlaps that slot) but is filled with a surface-alt * backdrop tile via `::before` so the circular logo sits on the * same surface as its grid neighbours. * * Animation is purely vertical: width is fixed at 192 (= 3 cells) * in BOTH states; only height transitions from 64 (closed) to 192 * (open). The bar grows UP from the bottom anchor; the bottom row * stays put. Fast (120 ms) — feedback that the state changed, but * no leisurely sweep. */ .belong-bar { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, var(--awning-ring-size)); grid-template-rows: repeat(3, var(--awning-ring-size)); width: calc(3 * var(--awning-ring-size)); height: var(--awning-ring-size); transition: height 120ms cubic-bezier(0.2, 0, 0, 1); /* Below the conduct controller + future act zone + popovers, * above actual cards. */ z-index: var(--shell-z-belong); overflow: visible; } .belong-bar[data-state="open"] { height: calc(3 * var(--awning-ring-size)); } /* Backdrop tile at row 3 col 2 — fills the empty grid slot the * absolutely-positioned central icon overlaps, so the circular * logo button has the same surface + border behind it as the 8 * surrounding square tiles. Only rendered when open (closed state * is just the bare logo). */ .belong-bar[data-state="open"]::before { content: ''; display: block; grid-column: 2; grid-row: 3; width: var(--awning-ring-size); height: var(--awning-ring-size); background: var(--surface-alt); border: 1px solid var(--border-soft); } /* Hide every cell except the central icon in closed state. */ .belong-bar[data-state="closed"] > :not(.belong-logo-btn) { display: none; } /* Cell base — the 8 surrounding cells (NOT the central icon). * Same aesthetic as the conduct-grid icons: flat surface-alt tile, * hairline border, sharp corners (no border-radius), accent on * hover. */ .belong-cell { width: var(--awning-ring-size); height: var(--awning-ring-size); display: flex; align-items: center; justify-content: center; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 0; cursor: pointer; color: var(--text-secondary); text-decoration: none; font-size: 28px; line-height: 1; padding: 0; margin: 0; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .belong-cell:hover { background: var(--surface-raised); border-color: var(--border-medium); color: var(--text-primary); } .belong-cell:focus-visible { outline: 1px solid var(--accent-primary); outline-offset: -1px; } /* Hidden cells still occupy their grid slot so the surrounding * layout doesn't reflow (alt-org cell hides when the caller has * only one org membership). */ .belong-cell[hidden] { display: flex; visibility: hidden; pointer-events: none; } .belong-cell-glyph { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 28px; line-height: 1; pointer-events: none; } .belong-cell-img { width: 75%; height: 75%; border-radius: 50%; object-fit: cover; } /* The central icon — taken OUT of the grid flow and absolutely * anchored to the bar's bottom-centre. This is the only way to * keep the icon pixel-stable during the closed↔open transition: * the bar's bottom + horizontal centre are anchored to the host, * and the icon's bottom + horizontal centre are anchored to the * bar — so the icon never moves while the bar grows around it. * * The grid leaves row 3 col 2 unoccupied; the icon overlaps that * slot. */ .belong-logo-btn { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--awning-ring-size); height: var(--awning-ring-size); border-radius: 50%; background: var(--surface-alt, #f1f5f9); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; z-index: 1; transition: box-shadow var(--shell-transition); } .belong-logo-btn:hover { /* Preserve the translateX(-50%) anchor; only add the scale. */ transform: translateX(-50%) scale(1.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .belong-logo-img { width: 75%; height: 75%; border-radius: 50%; object-fit: cover; } .belong-logo-mark { width: 24px; height: 24px; border-radius: 50%; background: var(--primary, #6366f1); opacity: 0.7; display: block; } /* Open-state grid placement. Row 3 col 2 is intentionally NOT * assigned — the absolutely-positioned central icon sits there. * The 8 surrounding cells occupy the other 8 slots. */ .belong-bar[data-state="open"] .belong-cell-org-switcher { grid-column: 1; grid-row: 1; } .belong-bar[data-state="open"] .belong-cell-user-profile { grid-column: 2; grid-row: 1; } .belong-bar[data-state="open"] .belong-cell-docs { grid-column: 3; grid-row: 1; } .belong-bar[data-state="open"] .belong-cell-alt-org { grid-column: 1; grid-row: 2; } .belong-bar[data-state="open"] .belong-cell-user-settings { grid-column: 2; grid-row: 2; } .belong-bar[data-state="open"] .belong-cell-community { grid-column: 3; grid-row: 2; } .belong-bar[data-state="open"] .belong-cell-current-org { grid-column: 1; grid-row: 3; } .belong-bar[data-state="open"] .belong-cell-admin { grid-column: 3; grid-row: 3; } /* Left-handed: bar is still centred (the central icon is the * anchor, not the edge). Handedness only affects which side the * conduct + act zones live on. */ .identity-peek { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: white; border-radius: 20px; padding: 8px 16px; font-size: 0.8rem; z-index: var(--shell-z-menus); white-space: nowrap; pointer-events: none; } .identity-peek[hidden] { display: none; } /* Belong is centred at the bottom on every form factor — this * pairs with the centred conduct + button (left edge), the * centred intent dot (right edge), and the centred awning ring * (top edge), giving each viewport edge a single circular * affordance at its midpoint. The 3 × 3 grid is universal: 192 * × 192 open / 64 × 64 closed at every form factor, no reflow. */ /* ================================================================ — slide-out card toolbar ================================================================ Default state: a thin vertical strip with a chevron toggle. Tap the chevron OR swipe inward to expand to a full toolbar panel. Sharp edges, hairline borders — architectural, not soft. */ minxi-act { /* Sharp corners — no rounding. */ border-radius: 0; border-left: 1px solid var(--border-medium); background: var(--surface); transition: width 200ms cubic-bezier(0.2, 0.0, 0.0, 1.0); } /* When no card is active (no toolbar manifest), the slide-out * has nothing to reveal — collapse it to zero width and hide * the chevron. The auto grid column means the active surface * grows to fill the freed space. */ minxi-act.act-empty { width: 0; border-left: none; background: transparent; pointer-events: none; } minxi-act.act-empty .act-toggle { display: none; } /* Default collapsed (with actions to reveal): just the toggle strip. */ minxi-act.act-collapsed:not(.act-empty) { width: 28px; } minxi-act.act-collapsed:not(.act-empty) .act-inner { display: none; } /* Expanded: panel with full toolbar. */ minxi-shell[data-form-factor="laptop"] minxi-act.act-expanded, minxi-shell[data-form-factor="desktop"] minxi-act.act-expanded { width: 240px; } /* Toggle strip — full-height, narrow, chevron at vertical centre. */ .act-toggle { position: absolute; top: 0; bottom: 0; left: 0; width: 28px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); padding: 0; border-radius: 0; transition: color var(--shell-transition); } .act-toggle:hover { color: var(--text-primary); } .act-toggle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; } .act-chevron { width: 14px; height: 14px; transition: transform 200ms cubic-bezier(0.2, 0.0, 0.0, 1.0); } /* Right-handed (default): act zone is on the right edge — chevron * points LEFT when collapsed (to indicate "swipe left to open") * and RIGHT when expanded (to indicate "swipe right to close"). */ minxi-act.act-collapsed .act-chevron { transform: rotate(0deg); } minxi-act.act-expanded .act-chevron { transform: rotate(180deg); } /* When expanded, the toggle moves to the left edge of the panel, * the toolbar fills the remaining space. */ minxi-act.act-expanded .act-inner { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: 100%; padding: 12px 12px 12px 36px; /* leave 28px for toggle */ gap: 8px; } minxi-act.act-expanded .toolbar-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } minxi-act.act-expanded .toolbar-btn { width: 100%; height: 40px; border-radius: 0; justify-content: flex-start; padding: 0 12px; gap: 12px; border-left: 2px solid transparent; } minxi-act.act-expanded .toolbar-btn.primary { border-left-color: var(--accent-primary); } minxi-act.act-expanded .action-label { display: inline; font-size: 13px; } /* Phone / tablet — keep simpler behaviour: act zone is the right * edge, slide-out applies but uses the existing widths. */ minxi-shell[data-form-factor="phone"] minxi-act, minxi-shell[data-form-factor="watch"] minxi-act { border-left: none; } /* ================================================================ Accessibility / reduced-motion ================================================================ */ @media (prefers-reduced-motion: reduce) { .awning-line, .ring-inner, minxi-act, .act-chevron { animation: none; transition: none; } } /* Screen reader only utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }