/* ========================================================================== Orcheum · CONVERSATION WORKSPACE — the conversation START surface Source of truth: Figma rMEk1pvm3hlrn2JuW5Sw34, node 130:8971, main column 130:9071 ("Frame 5"). Loaded after workspace-home-figma.css, response-header.css and orchestration.css — the three sheets that describe the conversation this one replaces. Where they disagree with the frame, this file is right. SCOPING IS THE WHOLE DESIGN OF THIS SHEET, exactly as it is in workspace-home.css. Every rule below is written under `.ws-main.is-conversation` — the class the shell sets when a conversation opens and clears the moment it is left. Home, Projects, Artifacts, Customize and the Studios cannot see any of it, and returning Home restores Build 02 byte-for-byte because none of these selectors match any more. FIGMA STROKES ARE INSIDE STROKES, as in the sidebar and the Home: a CSS `border` grows the box and the frame's does not. Every hairline this file draws is an inset box-shadow, which is what keeps the header 66 tall, the field flush with it, and the Share button 74.28 wide. The composer's own hairline is the exception and stays a real border, because it belongs to the locked paint system and is not this build's to convert; the card's padding absorbs it instead (see 130:9259 below). THE HEADER RULES ARE WRITTEN AS A CHILD OF THE COLUMN. When a run produces a deliverable, execution-surface.css re-parents that same header node into the working panel — a later build's frame, not this one's — and `>` is what lets it go back to being the band that frame draws. THE COMPOSER IS NOT REPAINTED HERE. workspace-home-figma.css owns the locked card and the blurred spectrum rectangle behind it for BOTH hosts (`.ws-composer-host` and `.ws-composer-dock`), and it already travels with `#composer-host` when the shell docks it. What this file gives it is the DOCK: the 800 column, the 796.27 card inside it, the 106 height, the 18 of padding and the 40 it stands off the frame's foot. Nothing else. ========================================================================== */ .ws-main.is-conversation { /* 138:10865 / 130:9072 — the band and the field are the same fill and the same hairline. Stated once, here, and NOT as an edit to a shared token: §3 of the build asks for the conversation's own surface colour, not for a new value of everyone's. */ --oc-conv-surface: #fdfbfa; --oc-conv-edge: #f0eeec; --oc-conv-title: #141413; /* 138:10871 */ --oc-conv-ink: #24252d; /* 138:10878 · 130:9255 */ --oc-conv-bubble: #f5f4f0; /* 160:2808 */ --oc-conv-bubble-ink: #141413; /* 160:2809 */ --oc-conv-stamp: #9f9792; /* 160:2810 */ /* 130:9246 — 800 in the frame's 1160 field. Written as the RATIO the frame states (800 / 1160 = 68.9655%) with 800 as its floor, so the reference width reproduces the frame exactly and a wider column keeps the frame's own proportion instead of stranding the reading measure in the middle of a much larger field. The reference defines one width; this is the only honest way to carry it to the others. */ --oc-conv-column: max(800px, 68.9655%); --oc-conv-face: Geist, Inter, var(--font-sans); } /* ---- 130:9071 — the column beside the sidebar -------------------------- 16 all round; the header and the field are its two children, 16 apart. The ground showing in that 16 is the page's own, read from the token the Home and the sidebar already share so the two can never drift. */ .ws-main.is-conversation .ws-conversation { align-items: center; gap: 16px; padding: 16px; background: var(--ws-figma-page); } /* The frame draws no identity line inside the conversation — 130:8971 ends at the field's edge. It returns wherever else it is drawn. */ .ws-main.is-conversation .ws-conversation__legal { display: none; } /* ========================================================================== HEADER — 138:10865 One rounded band, 66 tall, 18 of padding: the conversation's name at the head, the answer's own five regions in the middle, Share at the tail. `justify-content: space-between` is the frame's own layout, which is what puts the metadata cluster at x=532.86 rather than on the band's centre. ========================================================================== */ .ws-main.is-conversation .ws-conversation > .ws-answer-header { gap: 16px; justify-content: space-between; width: 100%; border-bottom: 0; border-radius: 20px; background: var(--oc-conv-surface); box-shadow: inset 0 0 0 1px var(--oc-conv-edge); } /* The reader's plan is not drawn by 138:10865. It is a fact about the account, not about this conversation, and the bar at rest is where it is stated. */ .ws-main.is-conversation .ws-conversation > .ws-answer-header .ws-ah-plan { display: none; } /* ---- 138:10866 — chevron, then the name -------------------------------- */ .ws-main.is-conversation .ws-conv-lead { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; height: 24px; } .ws-main.is-conversation .ws-conv-lead__back { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: #000; cursor: pointer; transition: background-color 140ms ease; } .ws-main.is-conversation .ws-conv-lead__back:hover { background: rgba(36, 37, 45, 0.06); } .ws-main.is-conversation .ws-conv-lead__back:focus-visible { outline: 2px solid rgba(240, 88, 34, 0.55); outline-offset: 2px; } .ws-main.is-conversation .ws-conv-lead__chevron { display: block; width: 20px; height: 20px; } /* 138:10871 — Geist Medium 16 on the frame's near-black. The node is 171 wide and set `whitespace-nowrap`; a longer name is a longer band, so the name truncates rather than wrapping the 66 into two lines. */ .ws-main.is-conversation .ws-conv-lead__title { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--oc-conv-title); font-family: var(--oc-conv-face); font-weight: 500; font-size: 16px; line-height: normal; } /* ---- 138:10872 — the answer's five regions ----------------------------- ResponseHeader already draws this cluster to the frame's own arithmetic: 16px glyphs, 4 to the label, 16 between regions, 8 across the clock/dot pair, 3 inside it — 36 + 16 + 32 + 16 + 32 + 16 + 75 = the 223 the frame measures. What changes here is only that it takes its own width instead of the 486 reserved track, because 138:10865 lays the band out with `space-between` and the cluster's position follows from that. */ .ws-main.is-conversation .ws-conversation > .ws-answer-header .ws-ah-host { /* It does not shrink. The cluster is the frame's fixed 223; the name beside it is the variable, so a long name truncates rather than eroding "Sources" into "So…". */ flex: 0 0 auto; margin: 0; } .ws-main.is-conversation .ws-conversation > .ws-answer-header .ws-ah__nav { width: auto; } .ws-main.is-conversation .ws-conversation > .ws-answer-header .ws-ah__tail { flex: 0 0 auto; } /* ---- 138:10903 — Share ------------------------------------------------- */ .ws-main.is-conversation .ws-conversation > .ws-answer-header .ws-share { gap: 3.381px; min-width: 54.0956px; height: 34px; /* 8 to the glyph, 3.381 to the word, 3.381 after it, 8 to the edge: 8 + 13.52 + 3.381 + 38 + 3.381 + 8 = the frame's 74.28. */ padding: 0 11.381px 0 8px; border-radius: 8px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--oc-conv-edge); -webkit-backdrop-filter: blur(13.524px); backdrop-filter: blur(13.524px); font-family: var(--oc-conv-face); font-weight: 400; font-size: 14px; line-height: 20.286px; color: var(--oc-conv-ink); } .ws-main.is-conversation .ws-conversation > .ws-answer-header .ws-share:hover:not(:disabled) { filter: none; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(36, 37, 45, 0.16); } .ws-main.is-conversation .ws-conversation > .ws-answer-header .ws-share__icon { width: 13.52px; height: 13.52px; } /* ========================================================================== THE FIELD — 130:9072 One rounded panel, the same fill and hairline as the band, filling everything left in the column. 24 of padding at the head; the foot's 24 is carried in the reserve below, where the docked composer stands. It is intentionally sparse. The frame draws no separators, no assistant card, no empty-state composition — the negative space IS the design. ========================================================================== */ .ws-main.is-conversation .ws-thread { width: 100%; /* 24 at the head. At the foot: 24 (the column's own) + 106 (the composer) + 24 (the composer's clearance) = 154, so scrolled content stops a full 24 above the card rather than sliding under it. */ padding: 24px 0 154px; border-radius: 20px; background: var(--oc-conv-surface); box-shadow: inset 0 0 0 1px var(--oc-conv-edge); overscroll-behavior: contain; } /* 130:9246 — the reading column, centred on the field. At the reference width that is the frame's 800, with 180 either side of the 1160. */ .ws-main.is-conversation .ws-thread__inner { width: var(--oc-conv-column); max-width: 100%; padding: 0; gap: 24px; } /* 130:9248 — the reader's message and Argus's line, 24 apart. */ .ws-main.is-conversation .orch-turn { align-items: stretch; gap: 24px; } /* ========================================================================== THE READER'S MESSAGE — 160:2808 A 550 plate on the column's right edge: 16 of padding, 6 between the words and the time, and one square corner where it meets the reader. ========================================================================== */ .ws-main.is-conversation .msg-user { align-self: flex-end; display: flex; flex-direction: column; gap: 6px; /* 550 is the plate's CEILING, not its width. The frame states 550 because the message it draws fills 550 — two full lines of it — and reading that as a fixed box left a short message sitting in a wide empty plate with its words stranded on the left. The plate hugs what was written and stops at the frame's 550, so "Reply with exactly three words." is a plate that size and 160:2808's own message still measures exactly 550. */ width: fit-content; max-width: min(550px, 100%); padding: 16px; border-radius: 16px 16px 4px 16px; background: var(--oc-conv-bubble); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--oc-conv-bubble-ink); font-family: var(--oc-conv-face); font-weight: 400; font-size: 15px; line-height: normal; } /* 160:2809 — the frame calls the leading "normal" and MEASURES it at 20 a line (its 2-line node is 40 tall). The browser's own normal for Geist 15 is 19.5, which loses a pixel per line and put the plate at 90 instead of 91 and Argus's line a pixel high with it. Stated at the frame's measurement. */ .ws-main.is-conversation .msg-user__text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 20px; } /* 160:2810 — subordinate, and inside the plate as drawn. */ .ws-main.is-conversation .msg-user__time { display: block; width: 100%; text-align: right; /* 160:2810 draws "10:42 AM". The reader's locale writes the digits and the separator; the day period is set in capitals here because that is the form the frame draws, and en-GB (among others) writes it lower case. */ text-transform: uppercase; color: var(--oc-conv-stamp); font-size: 10px; line-height: normal; } /* ========================================================================== ARGUS AT THE START — 130:9253 / 130:9255 "Thinking…" is not a component. It is what the orchestration panel LOOKS LIKE in the one state it has always had and never drew: created, live, and holding no beat yet. `window.Orchestration` builds `.orch.is-orchestrating` with an empty `.ostat` and stays silent until the Conductor's first real event; that silence is given a face here and loses it the moment a genuine row arrives. No avatar, no spinner, no card, no second status system. ========================================================================== */ /* 130:9253 is a plain 24 row on the column's left edge — the frame draws no mark beside it, so the mark this sheet's predecessor put there is not drawn in this state. (`.msg-answer` keeps its own; that block is Build 03B.) */ .ws-main.is-conversation .orch-turn > .orch { align-self: stretch; width: 100%; max-width: none; padding-left: 0; } .ws-main.is-conversation .orch-turn > .orch::before { content: none; } .ws-main.is-conversation .orch.is-orchestrating .ostat:empty { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; height: 24px; } .ws-main.is-conversation .orch.is-orchestrating .ostat:empty::before { content: "Thinking..."; color: var(--oc-conv-ink); font-family: var(--oc-conv-face); font-weight: 400; font-size: 16px; line-height: 1; } /* ========================================================================== THE DOCKED COMPOSER — 130:9256 / 130:9257 The frame stands the card 24 above the field's foot, and the field's foot is 16 above the frame's: 40 from the column's edge. It is docked to the CONVERSATION PANEL, not to the viewport — `.ws-conversation` is the containing block, so it travels with the column when the sidebar resizes or the working surface opens beside it. ========================================================================== */ .ws-main.is-conversation .ws-composer-dock { left: 16px; right: 16px; bottom: 16px; /* 24 of standoff at the foot; the 40 above it is the run the field fades over, so scrolled content passes under the card instead of through it. The fade IS the field's own colour, so at rest it is invisible — which is what 130:9072 draws. */ padding: 40px 0 24px; border-radius: 0 0 20px 20px; background: linear-gradient( to top, var(--oc-conv-surface) 68%, rgba(253, 251, 250, 0) 100% ); } /* 130:9256 — the composer's group is the content column's own 800. */ .ws-main.is-conversation .ws-composer-dock .ws-composer-host { gap: 0; width: var(--oc-conv-column); max-width: 100%; margin: 0 auto; } /* 130:9259 — the card is 796.273 of the group's 800, standing 1.305 into it. Width and placement only: the card's fill, hairline, radius, inset, floor, content column and the rectangle behind it are UI kit §4 (158:948) and are stated once in components/chat/composer.css. What stood here — a second copy of the glow, a second padding, a second radius and a second body gap — is deleted. It disagreed with the copy in workspace-home.css about the card's height, which is how the same composer came to measure 106 in the dock and 108 on Home. */ .ws-main.is-conversation .ws-composer-dock .oc-composer { /* 796.273 of the group's 800 — taken from the HOST, not from the column token: that token carries a percentage, and a percentage in a custom property resolves against whatever box uses it, which here would be the group itself rather than the field. */ width: calc(100% - 3.727px); max-width: 100%; margin: 0 2.422px 0 1.305px; } /* 130:9256 draws NO Modes beneath the docked card. The four pills are the Home resting state's (81:1032) and they travel with `#composer-host` only because the composer does; they are not rendered in a conversation. Hidden rather than removed, so the shell's existing wiring — and the row itself — are exactly what they were when the reader returns Home. */ .ws-main.is-conversation .ws-composer-dock .ws-primary-domains { display: none; } /* ---- Responsive --------------------------------------------------------- The reference defines desktop only. These keep the drawn composition whole as the column narrows — the 1160, the 800 and the 550 become the available width and nothing is re-proportioned. */ @media (max-width: 1024px) { .ws-main.is-conversation { --oc-conv-column: 100%; } } @media (max-width: 820px) { .ws-main.is-conversation .ws-conversation { padding: 12px; gap: 12px; } .ws-main.is-conversation .ws-composer-dock { left: 12px; right: 12px; bottom: 12px; } .ws-main.is-conversation .ws-thread { padding: 16px 0 150px; } .ws-main.is-conversation .ws-thread__inner { padding: 0 16px; } .ws-main.is-conversation .ws-composer-dock .oc-composer { width: 100%; margin: 0; } } @media (prefers-reduced-motion: reduce) { .ws-main.is-conversation .ws-conv-lead__back { transition: none; } }