/* Arkio web app shell. Utilitarian, calm, out of the way of the 3D scene. Dark by default (the scene reads better against dark chrome); a light scheme is provided for completeness. The colours are the 3.0 website's (Website/prototype-3.0/handoff/web-app-colors.md, 2026-10-04): neutrals do the work and teal means Arkio and action. Teal is a fill or a 2 px line; anything teal that has to be read (text, links, icons, focus rings, 1 px state borders) uses --accent-text, because Arkio teal is 2.2:1 on white. One teal button per view: --accent-ink on --accent, --accent-hover under the pointer. Status colours keep the app's own amber and red, darkened in the light theme to pass 4.5:1. */ :root { color-scheme: dark; /* native controls - select lists, scrollbars, date pickers - follow the theme; light below */ --bg: #0E1A19; /* deepest surface: app background, sunken inputs (the site's ink on teal) */ --panel: #152021; /* panes and toolbars (the site's dark sections) */ --panel-2: #1B2526; /* raised surfaces: composer, rails, cards */ --line: #2E393A; /* borders and dividers */ --ink: #E8EEEC; /* primary text */ --muted: #B5C3C1; /* secondary text */ --accent: #4CC1B8; /* Arkio teal: primary buttons, selection, the active-tool line. Fills and lines, not text */ --accent-hover: #3DB3AA; /* primary button under the pointer */ --accent-pressed: #34A198;/* primary button pressed */ --accent-ink: #0E1A19; /* text and icons on --accent (8.2:1) */ --accent-text: #7ED8CE; /* teal that has to be read: text, links, icons, focus rings, 1 px state borders */ --accent-soft: #1D3F3B; /* toggles that are on, tints, highlights */ --range-accent: var(--accent); /* native slider fill and thumb; the light theme needs a darker teal to keep its track gray */ --amber: #D9A441; /* warnings and low credits */ --danger: #E07A6A; /* errors and destructive actions */ --user-bubble: #EEF1EF; /* light bubble on dark chrome */ --user-ink: #1B2526; --divider-w: 6px; --app-height: 100vh; /* fallback before JS measures the visible viewport */ --app-top: 0px; /* ---- the player's toolbar, in one place: the line under the active tool (and the tabs to come), inks, sizes ---- */ --tool-line: var(--accent); /* 2px line under the active tool and tab */ --tool-ink: var(--ink); /* tool icon colour */ --tool-ink-off: #6F807D; /* disabled tool icon colour, the same in both themes */ --toolbar-h: 48px; /* scene header height, the line the other pane headers align to */ --tool-w: 36px; /* palette button width; a tool is as tall as the toolbar so its line sits on its bottom edge */ --tool-icon: 20px; /* glyph size */ --rail-w: 48px; /* the side panel's rail of tabs at the right edge */ } @media (prefers-color-scheme: light) { :root { color-scheme: light; --bg: #EEF1EF; --panel: #FFFFFF; --panel-2: #EEF1EF; --line: #E6E4DD; /* --panel-2 = --bg on purpose: --line separates them */ --ink: #1B2526; --muted: #5E6869; --accent-text: #1F6F66; --accent-soft: #DDF5F1; --amber: #8B641C; --danger: #C13D28; --range-accent: var(--accent-text); /* Chromium gives a light accent a dark contrasting track, even on white panels */ --user-bubble: #EEF1EF; --user-ink: #1B2526; /* --accent, --accent-hover, --accent-pressed, --accent-ink and --tool-ink-off are the same in both themes */ } } @supports (height: 100dvh) { :root { --app-height: 100dvh; } } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; } /* Safari browser chrome and the keyboard can shrink/pan the visible viewport without changing 100vh. app.js maintains its height/top; safe-area padding keeps every pane above the home indicator. */ body { position: fixed; top: var(--app-top); left: 0; width: 100%; height: var(--app-height); padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--bg); color: var(--ink); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; } #split { position: relative; display: flex; width: 100%; height: 100%; } /* positioned: the chats list's drawer and its scrim lie over it */ /* The chats list as a drawer (app.js showList): where the width will not hold the pane beside the chat and the scene it slides in over the split at the left, behind a scrim, every part of the pane with it. */ #sessions.drawer { position: absolute; left: 0; top: 0; bottom: 0; z-index: 7; width: min(320px, 85%); box-shadow: 8px 0 28px rgba(0, 0, 0, .28); animation: drawer-in .18s ease; } #list-scrim { position: absolute; inset: 0; z-index: 6; background: rgba(4, 8, 6, .4); } #list-scrim[hidden] { display: none; } @keyframes drawer-in { from { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { #sessions.drawer { animation: none; } } /* Browse tutorials: the chooser's door to the folded list, under its words in the chat pane, in the chips' chrome rather than the accent, since it is a way to the list and not the chat's own action; app.js hides it while the list stands beside the chat. */ .tutorials-door { align-self: center; margin-top: 14px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .15s ease; } .tutorials-door:hover, .tutorials-door:focus-visible { border-color: var(--accent-text); outline: none; } .tutorials-door[hidden] { display: none; } /* ---- sessions sidebar (leftmost) ---- */ #sessions { height: 100%; min-width: 150px; display: flex; flex-direction: column; overflow: hidden; background: var(--panel-2); border-right: 1px solid var(--line); } /* New chat across the pane's head (.sessions-head, collapsible panes below): one line down to the pane's floor, which leaves it 106px for its 98px of words. */ #new-chat { flex: 1 1 auto; min-width: 0; margin: 0; padding: 9px 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease; } #new-chat:hover { border-color: var(--accent-text); } /* ---- the chats list (design canvas page 27; app.js "sessions UI") ---- */ /* #chats is the list: the places, a hairline, the chats' head, the scrolling rows and the status line. #place is a place drilled into the column in its stead (Media, Samples); New chat above and the account footer below stay. */ #chats, #place { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #chats[hidden], #place[hidden] { display: none; } /* The two places, Media and Samples: a glyph tile, two lines and the chevron that says "this opens in the column". Buttons, never selected: a place is not a chat. */ .places { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 0 8px 2px; } /* A place is one line at the chat rows' height: a glyph, the name, the chevron that says it opens in the column. Counts and progress belong to the place itself, not to the list. */ .place-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer; } .place-row:hover, .place-row:focus-visible { background: var(--chat-hover, rgba(127,127,127,.08)); outline: none; } .place-glyph { flex: 0 0 auto; display: inline-flex; color: var(--muted); } .place-glyph svg { width: 15px; height: 15px; } .place-name { flex: 1 1 auto; min-width: 0; padding: 2px 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .place-chevron { flex: 0 0 auto; display: inline-flex; color: var(--muted); } .place-chevron svg { width: 13px; height: 13px; } .chats-rule { flex: 0 0 1px; margin: 4px 16px; background: var(--line); } /* The chats' head: the caption and the List | Cards toggle, the picked view pressed. */ .chats-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px 4px 18px; } .chats-caption { flex: 1 1 auto; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); } .view-btn { width: 26px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .view-btn svg { width: 13px; height: 13px; } .view-btn:hover, .view-btn:focus-visible { color: var(--ink); outline: none; } .view-btn[aria-pressed="true"] { color: var(--ink); background: var(--active-item, rgba(127,127,127,.14)); } /* The rows scroll together: the chats, then Archived and, open, its chats. In the card view the two listboxes are grids, two cards to a row, one once the list is narrower than 200px (the column dragged towards its 150px floor), where two cards would be too small to read their names. */ #session-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; container-type: inline-size; } #chat-rows, #archived-rows, #shared-rows { display: flex; flex-direction: column; gap: 1px; } #chat-rows.cards, #archived-rows.cards, #shared-rows.cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; align-content: start; } @container (max-width: 200px) { #chat-rows.cards, #archived-rows.cards, #shared-rows.cards { grid-template-columns: minmax(0, 1fr); } } /* List children sit beneath the Archived label; the guide aligns with its glyph and ends at the last row. */ #archived-rows:not(.cards), #shared-rows:not(.cards) { margin-inline-start: 19px; padding-inline-start: 4px; border-inline-start: 1px solid var(--line); } #archived-rows[hidden], #shared-rows[hidden], #archived-empty[hidden], .archived-foot[hidden] { display: none; } /* Archived at the foot of the same list: a quiet row with the archive glyph, the word, the count and a chevron that turns down while the section is open. Match the 34px chat row and prevent the scrolling flex list from shrinking its click target. */ .archived-foot { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; width: 100%; margin: 4px 0 0; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer; } .archived-foot:hover, .archived-foot:focus-visible { background: var(--chat-hover, rgba(127,127,127,.08)); color: var(--ink); outline: none; } .archived-foot svg { flex: 0 0 auto; width: 14px; height: 14px; } .archived-foot .archived-chevron { width: 12px; height: 12px; transition: transform .15s ease; } .archived-foot[aria-expanded="true"] .archived-chevron { transform: rotate(90deg); } .archived-word { flex: 1 1 auto; } #archived-empty { margin: 6px 10px 4px; font-size: 12px; line-height: 1.4; color: var(--muted); } #archived-empty strong { display: block; color: var(--ink); font-weight: 600; } #archived-empty p { margin: 2px 0 0; } /* An archived chat: muted, its title still readable, Restore under the pointer (and in its menu) and nothing else; clicking the row does not open it. */ .session-item.archived { color: var(--muted); } .session-item.archived:hover, .session-item.archived.menu-open { color: var(--ink); } .session-item[data-open-disabled="true"], .session-item[data-open-disabled="true"] .session-title { cursor: default; } .session-restore { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity .12s ease, border-color .15s ease; } .session-restore svg { width: 12px; height: 12px; } /* In a row the pill leaves the layout while unseen, so the title keeps its width; on a card it sits over the still. */ .session-item .session-restore { display: none; } .session-item:hover .session-restore, .session-item:focus-within .session-restore, .session-item.menu-open .session-restore { display: inline-flex; } .session-item:hover .session-restore, .session-item:focus-within .session-restore, .session-item.menu-open .session-restore, .lib-card:hover .session-restore, .lib-card:focus-within .session-restore, .lib-card.menu-open .session-restore { opacity: 1; } .session-restore:hover, .session-restore:focus-visible { border-color: var(--accent-text); outline: none; } .session-restore:disabled { opacity: .45; cursor: default; } /* The list's one feedback line, at the foot above the account footer: what the last archive or restore did, naming the chat, with its one action (Show in Archived, Show in Chats, Retry) and a detail line while the cloud side waits. */ #chats-status { flex: 0 0 auto; margin: 0 10px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 12px; line-height: 1.4; color: var(--ink); } #chats-status[hidden] { display: none; } #chats-status[data-kind="error"] { border-color: var(--amber); } .cs-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; } .cs-text { font-weight: 600; } .cs-name { flex: 1 1 auto; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-action { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .cs-action:hover, .cs-action:focus-visible { text-decoration: underline; outline: none; } .cs-detail { display: block; margin-top: 2px; color: var(--muted); } /* A row the status line points at (Show in Archived, Show in Chats) wears the ring for a moment. */ .session-item.highlight, .lib-card.highlight { box-shadow: inset 0 0 0 2px var(--accent); } .session-item, .lib-card { transition: box-shadow .6s ease; } /* A place drilled into the column: the back chevron, the name, what it holds at the right, and the body under them. The Saved media fixture's one action (Delete saved media) keeps its ⋮ in the Media header while the fixture exists. */ /* The place head stands in for the pane's head band while a place is open: New chat is not for a place and the fold glyph is off, so the band would be empty; at the band's height the place's Back and name sit level with the chat header. */ .place-head { flex: 0 0 var(--toolbar-h); display: flex; align-items: center; gap: 6px; padding: 0 12px 0 6px; } #sessions:has(#place:not([hidden])) .sessions-head { display: none; } #place-back { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; } #place-back svg { width: 15px; height: 15px; } #place-back:hover, #place-back:focus-visible { color: var(--ink); background: var(--chat-hover, rgba(127,127,127,.08)); outline: none; } #place-title { flex: 1 0 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; } #place-meta { flex: 0 1 auto; min-width: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #place-menu-btn { opacity: 1; } #place-menu-btn[hidden] { display: none; } #place-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; container-type: inline-size; } /* the samples grid folds by its width, as the chats' cards do by #session-list's */ /* Cards: the chats in the card view and the samples, two to a row: a still (or a placeholder with a glyph), the name and a meta line. A card opens its chat as a row does; the selected chat wears the ring; an empty chat is a blank card. */ .lib-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; padding: 0 8px; align-content: start; } /* One column at the pane width where the chats' card view folds (above, #session-list at 200px): that list carries the 8px side padding the grid carries here, so its container is 16px narrower than #place-body at the same pane width. */ @container (max-width: 216px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } } .lib-card { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 9px; color: var(--ink); cursor: pointer; user-select: none; } .lib-card.sample { border: 0; background: transparent; font: inherit; text-align: left; } .lib-card.sample:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .lib-card:hover, .lib-card.menu-open { background: var(--chat-hover, rgba(127,127,127,.08)); } .lib-card.active { box-shadow: inset 0 0 0 2px var(--accent); } .lib-card[data-open-disabled="true"] { cursor: default; } .lib-still { position: relative; height: 76px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); } .lib-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .lib-still-empty { position: absolute; inset: 0; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); } .lib-still-empty svg { width: 18px; height: 18px; } .lib-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .lib-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .lib-dot[hidden] { display: none; } .lib-card .session-title { padding: 0; font-size: 12px; font-weight: 600; line-height: 1.25; } .lib-card .session-meta { margin-top: -3px; } .lib-card.empty .session-title, .lib-card.archived .session-title { color: var(--muted); } .lib-card .session-menu-btn { position: absolute; right: 5px; top: 5px; background: var(--panel); border: 1px solid var(--line); } .lib-card:hover .session-menu-btn, .lib-card.active .session-menu-btn, .lib-card.menu-open .session-menu-btn { opacity: 1; } .lib-card .session-open { position: absolute; right: 5px; bottom: 5px; display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; background: rgba(21, 32, 33, .72); color: #fff; font-size: 10px; font-weight: 600; } .lib-card .session-restore, .lib-pill { position: absolute; left: 5px; bottom: 5px; } .lib-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity .12s ease, border-color .15s ease; } .lib-pill svg { width: 12px; height: 12px; } .lib-card:hover .lib-pill, .lib-card:focus-within .lib-pill, .lib-pill:focus-visible { opacity: 1; } .lib-pill:hover, .lib-pill:focus-visible { border-color: var(--accent-text); outline: none; } .lib-card .session-rename { margin: 0; } /* The account footer (account.js): Log in, which grows into the email and code steps; signed in, the credits ring, the email and Log out. The buttons keep the pane's big-button look (New chat's). */ /* 8px of the pane's ground above the card: a row scrolling out ends in that ground, not on the card's edge. No line and no fade, both tried and declined (2026-10-14). */ #account { flex: 0 0 auto; display: flex; flex-direction: column; margin: 8px 10px 12px; } #account [hidden], .ac-form[hidden], .ac-form [hidden] { display: none; } /* the form keeps it when it opens in the chat */ .ac-login { width: 100%; padding: 9px 12px; text-align: left; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .ac-login:hover:not(:disabled) { border-color: var(--accent-text); color: var(--ink); } .ac-login:disabled { opacity: .5; cursor: default; } .ac-status { margin: 6px 2px 0; font-size: 11px; line-height: 1.4; color: var(--muted); } .ac-form, .ac-in { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); } .ac-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ac-title { font-size: 13px; font-weight: 600; color: var(--ink); } .ac-close { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; } .ac-close:hover { color: var(--ink); background: var(--active-item, rgba(127, 127, 127, .14)); } .ac-close svg { width: 12px; height: 12px; } .ac-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; } .ac-email, .ac-code { width: 100%; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; } .ac-email:focus, .ac-code:focus { outline: none; border-color: var(--accent-text); } .ac-email::placeholder, .ac-code::placeholder { color: var(--muted); font-weight: 400; letter-spacing: normal; } .ac-code { text-align: center; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; } .ac-error { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--danger); } .ac-submit { width: 100%; height: 30px; border: 0; border-radius: 7px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .ac-submit:hover:not(:disabled) { background: var(--accent-hover); } .ac-submit:disabled { opacity: .5; cursor: default; } .ac-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--muted); } .ac-link { padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: 11px; cursor: pointer; } .ac-link:hover:not(:disabled) { text-decoration: underline; } .ac-link:disabled { color: var(--muted); cursor: default; } .ac-credits { display: flex; align-items: center; gap: 10px; } .ac-ring { width: 28px; height: 28px; flex: 0 0 auto; transform: rotate(-90deg); } .ac-ring-track { fill: none; stroke: var(--line); stroke-width: 3; } .ac-ring-value { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .3s ease; } #account[data-low="true"] .ac-ring-value { stroke: var(--amber); } #account[data-low="empty"] .ac-ring-value { stroke: var(--danger); } .ac-credits-text { display: flex; flex-direction: column; min-width: 0; } .ac-credits-count { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .ac-credits-label { font-size: 11px; color: var(--muted); } .ac-email-line { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* One row per chat: the title, and a ⋮ that opens the row's menu (Open scene in new chat, Delete chat). The whole row is the click target for switching; the ⋮ shows on hover, on the active row, while its menu is open and when focused, so the list stays quiet until a row is looked at. */ .session-item { display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 10px; border-radius: 8px; cursor: pointer; user-select: none; color: var(--muted); font-size: 13px; line-height: 1.35; } .session-item:hover, .session-item.menu-open { background: var(--chat-hover, rgba(127,127,127,.08)); color: var(--ink); } .session-item.active { background: var(--agent-bubble, rgba(127,127,127,.14)); color: var(--ink); font-weight: 550; } .session-title { flex: 1 1 auto; min-width: 0; padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The name as a field, in place (Rename chat, app.js renameField): the text stays where it stood, the frame's border and padding pulled back by the 7 px they add; white on the column, framed in the accent as every focused field is; the whole name selected in the accent's tint; the ⋮ and the Open elsewhere badge step aside while it is open. */ .session-rename { flex: 1 1 auto; min-width: 0; height: 22px; margin: 0 0 0 -7px; padding: 0 6px; border: 1px solid var(--accent-text); border-radius: 5px; background: var(--panel); color: var(--ink); font: inherit; outline: none; } .session-rename::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } .session-rename::placeholder { color: var(--muted); font-weight: 400; } .session-menu-btn { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; padding: 0 0 2px; border: none; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s ease, background .15s ease, color .15s ease; } .session-item:hover .session-menu-btn, .session-item.active .session-menu-btn, .session-item.menu-open .session-menu-btn, .session-menu-btn:focus-visible { opacity: 1; } .session-menu-btn:hover, .session-menu-btn:focus-visible, .session-item.menu-open .session-menu-btn { background: var(--line); color: var(--ink); outline: none; } /* The tutorial sits below Samples, above the Chats divider. Its green dot marks unfinished lessons. */ #tutorial-entry-status { flex: 0 0 auto; color: var(--accent-text); font-size: 11px; } #tutorial-entry.in-progress { box-shadow: inset 0 0 0 1px var(--line); background: var(--panel); } .tutorial-library-card { display: flex; align-items: center; width: 100%; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .tutorial-library-card:hover, .tutorial-library-card.active { border-color: var(--line); background: var(--panel); } .tutorial-library-open { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; } .tutorial-library-open:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; } .tutorial-library-card.disabled { opacity: .5; } .tutorial-library-open:disabled { cursor: default; } .tutorial-library-card .session-menu-btn { margin-right: 8px; } .tutorial-library-card:hover .session-menu-btn, .tutorial-library-card:focus-within .session-menu-btn, .tutorial-library-card.active .session-menu-btn, .tutorial-library-card.menu-open .session-menu-btn { opacity: 1; } .tutorial-library-card .session-menu-btn[hidden] { display: none; } .tutorial-library-glyph { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 7px; color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 12%, transparent); } .tutorial-library-glyph svg { width: 16px; height: 16px; } .tutorial-library-body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; } .tutorial-library-body strong { font-size: 13px; font-weight: 600; } .tutorial-library-status { color: var(--muted); font-size: 11px; } .tutorial-library-bar { height: 3px; margin-top: 3px; background: var(--line); } .tutorial-library-bar > span { display: block; height: 100%; background: var(--accent-text); } .session-item.tutorial { gap: 10px; color: var(--ink); } /* one line like every row: its progress lives in the tutorial itself */ .session-item.tutorial::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #339926; box-shadow: 0 0 0 3px color-mix(in srgb, #339926 22%, transparent); } .session-item.tutorial.done::before { display: none; } .session-item.tutorial .session-title { font-weight: 600; } .session-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* A scene the cloud device group sent (chat-list.js unseenDot): a plain accent dot before the name, no halo and no bold, on the row and in the card's title row, until the chat is first opened. */ .session-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .sessions-locked #new-chat, .sessions-locked .session-item, .sessions-locked .lib-card { opacity: .45; pointer-events: none; } /* The chat menu popover. Same chrome as the viewer and the tutorial label: panel surface, hairline, soft shadow. Fixed at body level and above everything in the shell (the viewer is z 5 inside the scene pane). */ #session-menu { position: fixed; z-index: 20; min-width: 210px; padding: 4px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } #session-menu[hidden] { display: none; } .session-menu-item { display: block; width: 100%; padding: 7px 12px; text-align: left; border: none; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; white-space: nowrap; } .session-menu-item:hover:not(:disabled), .session-menu-item:focus-visible { background: var(--chat-hover, rgba(127,127,127,.1)); outline: none; } .session-menu-item:disabled { opacity: .45; cursor: default; } .session-menu-item.danger { color: var(--danger); } /* ---- scene (rightmost) ---- */ #scene { position: relative; height: 100%; min-width: 320px; flex: 1 1 auto; background: #000; overflow: hidden; } /* The scene owns touch navigation. Safari ignores user-scalable=no, so the viewport meta alone cannot keep a pinch inside Unity. Leave browser gestures available on the surrounding shell. */ #unity-canvas { width: 100%; height: 100%; display: block; touch-action: none; } .tutorial-scene-transition { position: absolute; inset: 0; width: 100%; height: 100%; background: #152021; opacity: 0; pointer-events: none; z-index: 1; } #loading { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 40%, #112A27 0%, #0A1213 100%); transition: opacity .4s ease; z-index: 2; } #loading.hidden { opacity: 0; pointer-events: none; } #loading-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: spin 900ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } } #loading-text { color: #B5C3C1; /* on the dark veil in both themes */ font-size: 14px; letter-spacing: .02em; } #progress-track { width: 200px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; } #progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .2s ease; } /* ---- dividers ---- */ /* A pane squeezing under its floor while its divider is dragged (app.js applyLayout): its content is clipped, not reflowed, so the fold reads as the pane sliding away, and it fades as the fold nears (--squeeze, 0 at the floor to 1 at the fold). Beside the divider a label says what dragging on does, as faint or plain as the fade. The clip needs the content to keep its width: the children are flex items that would stretch to the pane and rewrap, so each holds the pane's floor (--floor, from applyLayout) and the pane cuts it. The chats list and the chat, with the divider on their right, lose their content under it; the panel, with the divider on its left, aligns its content to its right so it slides out leftward the same way. The fade runs to nothing, eased so the first part of the drag barely touches the words and the last part takes them. */ #sessions.squeezing, #chat.squeezing, #panel.squeezing { min-width: 0; overflow: hidden; } #sessions.squeezing > *, #chat.squeezing > *, #panel.squeezing > * { min-width: var(--floor, 0); max-width: var(--floor, none); /* the cross axis: flex-shrink would stop the transcript giving height */ opacity: calc(1 - var(--squeeze, 0) * var(--squeeze, 0)); } #panel.squeezing { align-items: flex-end; } .fold-hint { position: absolute; top: 50%; left: 100%; z-index: 5; transform: translateY(-50%); margin-left: 10px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font-size: 11.5px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; opacity: var(--squeeze, 0); } #divider-c .fold-hint { left: auto; right: 100%; margin: 0 10px 0 0; } /* The tooltips (tooltip.js, design canvas page 33): every title in the fold hint's chrome, above everything (menus at 60), never taking the pointer. The name, a keycap for a shortcut beside it, a muted second line for a description; long text wraps at 260 px. tooltip.js places it and says the side it took in data-side. */ .sh-tooltip { position: fixed; left: 0; top: 0; z-index: 100; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: 260px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; box-shadow: 0 6px 18px rgba(0, 0, 0, .40); pointer-events: none; } .sh-tooltip[hidden] { display: none; } .sh-tooltip .tt-name { display: flex; align-items: center; gap: 10px; } .sh-tooltip .tt-name:has(kbd) { white-space: nowrap; } .sh-tooltip kbd { padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); color: var(--muted); font: inherit; font-size: 11px; line-height: 17px; } .sh-tooltip .tt-sub { color: var(--muted); font-size: 11.5px; font-weight: 400; } @media (prefers-color-scheme: light) { .sh-tooltip { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } } .divider { flex: 0 0 var(--divider-w); cursor: col-resize; background: var(--line); position: relative; transition: background .15s ease; touch-action: none; user-select: none; -webkit-user-select: none; /* own the drag instead of starting Safari pan/zoom */ } .divider::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 34px; border-radius: 2px; background: var(--muted); opacity: .5; } .divider:hover, .divider.dragging, .divider:focus-visible { background: var(--accent); outline: none; } /* The live video divider runs across the scene pane and drags up/down: same thickness, the grip turned on its side. */ .divider.horizontal { cursor: row-resize; width: 100%; } .divider.horizontal::after { width: 34px; height: 2px; } /* A finger needs more than the 6px line: on touch the horizontal dividers (the dock's and the live pane's) take 10px either side. */ @media (pointer: coarse) { .divider.horizontal::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; } } /* ---- collapsible panes (app.js "collapsible panes") ---- */ /* The chats list and the chat fold away as the side panel does, so a small screen can give the player the room. The fold controls follow two rules. The glyph: the shell's frame with the pane marked off as a region, and a small arrow inside the frame pointing the way the pane goes, into its edge to close, out of it to open; the region says which pane, the arrow says which way, and an arrow inside a frame is never read as Back, which is what the place head's own bare chevron is (#place-back). The place: a pane folds and unfolds at its edge, never from a header, which keeps its content. Folding is a tab that appears on the divider when it is hovered (.fold-tab, app.js wires one per vertical divider). Unfolding is where the pane went: the chats list leaves nothing on screen, so its open glyph stands at the chat header's left only while it is folded (#list-open), a plain button inset from the screen's edge for a finger or a stylus; the chat folds into the dock, a visible strip, so its way back is the same kind of button in the dock's lead line (#chat-expand), and #list-open then moves up to the scene header's left, level with the rail toggle at its right, so the two ways back frame the toolbar; the side panel's toggle is the rail band at the shell's right edge (#rail-toggle). aria-expanded picks a glyph's arrow. Folded panes and their dividers are display:none, so the split sees the right number of panes. */ .sessions-head { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin: 12px 10px 8px; } /* The fold tab: on the divider's line, shown while the divider is armed (app.js: the pointer has rested on the line, and has not yet left it for good) or holds keyboard focus, and not while it drags; the glyph of the pane it folds, and a click folds it, as the divider's double-click also does. app.js sets its top to sit just above the pointer where it reached the line; the 10px here is only its place under keyboard focus. */ .fold-tab { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 34px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s ease, border-color .15s ease; z-index: 3; } .divider.armed .fold-tab, .divider:focus-within .fold-tab { opacity: 1; pointer-events: auto; } .divider.dragging .fold-tab, .fold-tab[hidden] { display: none; } .fold-tab svg { width: 16px; height: 16px; } .fold-tab:hover, .fold-tab:focus-visible { border-color: var(--accent-text); outline: none; } /* The list's way back: its open glyph as a plain .pane-glyph button, first in the chat header while the list is folded, or in the dock's open group when the chat is folded too. The header's own padding insets it from the screen's edge, where an iPad's edge swipes and a stylus's hover zone live, so no control sits flush with the glass. */ #chat-header #list-open { margin: 0 6px 0 -6px; } /* clear of the dot, and pulled 6px into the header's padding */ #scene-header #list-open { margin-left: -4px; } /* pulled into the toolbar's padding, where the rail toggle sits at the other end */ .pane-glyph { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s ease; } .pane-glyph:hover, .pane-glyph:focus-visible { color: var(--ink); outline: none; } .pane-glyph[hidden] { display: none; } .pane-glyph svg { width: 16px; height: 16px; } .pane-glyph[aria-expanded="true"] .pg-open, .pane-glyph[aria-expanded="false"] .pg-close { display: none; } #sessions[hidden], #divider-a[hidden], #chat[hidden], #divider-b[hidden] { display: none; } /* The chats as a popover under the chat's title while the list is hidden: New chat, the chats with the open one marked, and the way back to the list, which is where Archived lives. The chat menu's chrome, fixed at body level. */ #chats-popover { position: fixed; z-index: 20; min-width: 220px; max-width: 320px; padding: 4px; display: flex; flex-direction: column; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } #chats-popover[hidden] { display: none; } .cp-rows { max-height: 50vh; overflow-y: auto; } .cp-rule { flex: 0 0 1px; margin: 4px 8px; background: var(--line); } .cp-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; } .cp-row:hover:not(:disabled), .cp-row:focus-visible { background: var(--chat-hover, rgba(127,127,127,.1)); outline: none; } .cp-row:disabled { opacity: .45; cursor: default; } .cp-row.active { background: var(--agent-bubble, rgba(127,127,127,.14)); font-weight: 550; } .cp-row.muted { color: var(--muted); } .cp-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-check { flex: 0 0 auto; width: 14px; height: 14px; } /* The dock: the scene pane's last row, under the player and a docked Live render pane, behind the dock divider (the live divider's twin: app.js fracs.dock). Closed, it is the lead line and the composer and takes its own height. Dragged open (.expanded) it takes the height the drag gave it and the transcript, moved here with the composer, fills the room between the two; the lead line then drops its words, since the replies are in view, and keeps the way back, the name and the save state. */ #divider-dock[hidden] { display: none; } #composer-dock { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; background: var(--panel-2); container-type: inline-size; } /* the lead line's extras come and go with the dock's width */ #composer-dock[hidden] { display: none; } #composer-dock #composer { border-top: 0; padding-top: 0; } /* Wide, the dock's composer is one line (design canvas Lower collapsed dock, A): the field at the left, then the chips, the squares and the arrow, on one row of the box, the row's own box dissolved into it (display: contents) so its children stand beside the field. The reasoning and speed chips keep to their squares here (composer-chips.js fit), the width being the field's. A longer draft lifts the field line by line against the bottom-aligned row and scrolls inside past six lines. The chat pane's composer keeps its two-line field over its row. */ @container (min-width: 760px) { #composer-dock #composer-box { flex-direction: row; align-items: flex-end; gap: 6px; padding: 8px 10px; } #composer-dock #composer-row { display: contents; } #composer-dock #composer-options { flex: 0 0 auto; } /* The spacer that parts the settings from the message's own buttons across the pane's row is a hairline here, since the row no longer has a width to part them with: the settings persist, the squares act on this message. */ #composer-dock .composer-spacer { flex: 0 0 1px; width: 1px; height: 16px; margin: 0 2px 7px; background: var(--line); } #composer-dock #input { min-height: 30px; max-height: 130px; padding: 5px 4px 5px 6px; overflow-y: auto; } } #composer-dock #messages, #composer-dock #prompt-queue { display: none; } #composer-dock.expanded #messages { display: flex; padding: 12px 18px; background: var(--panel); } #composer-dock.expanded #prompt-queue:not([hidden]) { display: block; } #composer-dock.expanded #dock-lead { border-bottom: 1px solid var(--line); } #composer-dock.expanded .dock-line, #composer-dock.expanded #dock-then, #composer-dock.expanded #dock-thumbs { display: none; } /* the transcript is in view: it has all of it */ #composer-dock.expanded #composer { padding-top: 10px; border-top: 1px solid var(--line); } /* The tutorial's intro and lesson card dock with the chat (app.js dockMovers, for the portrait layout) and keep their own display there, open or closed: a closed dock is the lead line and the composer, and the lesson's instructions stand above the composer as they do in the pane (Embla, 2026-10-14), since a tutorial without its card is unusable; only the transcript waits for the drag. An open dock grows to hold its rows (app.js applyLayout, dockRows); where even the player's floor leaves too little, the card is the row that gives, shrinking to a few lines and scrolling, so the composer never leaves the pane. */ #composer-dock.expanded #tutorial-panel:not([hidden]) { flex: 0 1 auto; min-height: 72px; overflow-y: auto; } /* the eyebrow, the title and a line; the transcript's 24px of padding stays below it at the cap */ /* The transcript's basis is nothing here, so it takes only what the rows leave and never makes the card give way first: flex-shrink spreads the squeeze by basis, and the transcript's own content would otherwise be the larger basis. */ #composer-dock.expanded #messages { flex: 1 1 0; } /* The lead line keeps the composer's 14 px inset, so the open button starts on the box's left edge and the save state ends on its right edge (the badge's own padding pulled back). */ /* A grid, so the one-line row stays the one-line row (the open button, the dot, the name, the line, the thumbnails, the save state, each centred on the 28 px button) and the second line, when there is one, hangs under the line's own column, left-aligned with it, rather than the two lines being centred as a block against the row. */ #dock-lead { flex: 0 0 auto; display: grid; grid-template-columns: auto auto fit-content(40%) minmax(0, 1fr) auto auto fit-content(220px); align-items: center; /* the name and the save state take their own width up to a cap; a cap on the item itself would resolve against its own column, and a minmax track would stretch to it */ column-gap: 8px; min-width: 0; padding: 6px 14px; font-size: 12.5px; color: var(--muted); } #chat-expand { grid-column: 1; margin-right: 6px; } /* clear of the dot and name, as the list's button is in the chat header */ #dock-dot { grid-column: 2; } #dock-title { grid-column: 3; } .dock-line { grid-column: 4; } #dock-thumbs { grid-column: 5; } /* The save state's words end on the arrow's right edge below (the box's border, then its 10 px of padding), the edge the eye matches, rather than on the border line. */ #dock-lead .cloud-save-state { grid-column: 7; max-width: none; margin-right: 5px; } #dock-lead .cloud-save-state[data-state="conflict"], #dock-lead .cloud-save-state[data-state="remote"] { border-radius: 7px; } /* the pill (below) rounds like the lead line's chrome */ /* The cloud card in the dock (app.js paneHooks): one row under the lead line, over the composer; the heading, the sentence cut to one line, the buttons at the right. */ #composer-dock #cloud-card { flex-direction: row; align-items: center; gap: 12px; margin: 0 14px 8px; padding: 8px 12px; } #composer-dock #cloud-card .cloud-card-head { flex: none; white-space: nowrap; } #composer-dock #cloud-card .cloud-card-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #composer-dock #cloud-card .cloud-card-actions { flex: none; margin: 0 0 0 auto; } @container (max-width: 700px) { #composer-dock #cloud-card .cloud-card-text { display: none; } } /* a narrow dock keeps the heading and the choice */ /* The sample panel in the dock (app.js paneHooks): the cloud card's row, the heading, the sentence cut to one line and Continue Designing at the right, where the collapsed sample chat would otherwise offer nothing. :not([hidden]) keeps the panel's own [hidden] rule (below) in charge of whether it shows. */ #composer-dock #sample-panel:not([hidden]) { display: flex; align-items: center; gap: 12px; margin: 0 14px 8px; padding: 8px 12px; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; } /* The words give way, never the button, and the heading stays whole: with the sentence on the row (a wide dock) only the sentence shrinks, cut with an ellipsis, and the heading keeps its line (flex: none). Below 700px the container rule at the foot drops the sentence and lets the heading wrap instead, so it still reads in full beside the button on the narrowest dock (MIN_SCENE), on two lines when one is not enough. The button is flex: none throughout. */ #composer-dock #sample-panel strong { flex: none; white-space: nowrap; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--ink); } #composer-dock #sample-panel p { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The button in the strip's own idiom (.header-btn): the line border at rest, the accent on hover, no fill. The pane's filled accent button is a card's call to action; in the dock it shouts over the lead line. */ #composer-dock #sample-panel .continue-designing { flex: none; height: 30px; margin-left: auto; padding: 0 12px; border-color: var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 500; } #composer-dock #sample-panel .continue-designing:hover:not(:disabled), #composer-dock #sample-panel .continue-designing:focus-visible { background: var(--panel); border-color: var(--accent-text); color: var(--ink); } @container (max-width: 700px) { /* a narrow dock keeps the heading, wrapping, and the button */ #composer-dock #sample-panel p { display: none; } #composer-dock #sample-panel strong { flex: 1 1 auto; min-width: 0; white-space: normal; } } #dock-then { grid-column: 4; grid-row: 2; } #dock-title { max-width: none; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); } .dock-line { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color .15s ease; } .dock-line:hover, .dock-line:focus-visible { color: var(--ink); outline: none; } /* The second line and the thumbnails show only on a wide dock (a landscape player of some size), where the lead line has the room for them; a narrow dock keeps to its one line. */ #dock-then { display: none; min-width: 0; margin-top: -2px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #dock-now.current, #dock-then.current { animation: pulse 1.6s ease-in-out infinite; } /* the agent's activity line, as in the transcript */ @media (prefers-reduced-motion: reduce) { #dock-now.current, #dock-then.current { animation: none; } } #dock-thumbs { display: none; flex: 0 0 auto; align-items: center; gap: 6px; } @container (min-width: 760px) { #dock-then:not([hidden]) { display: block; } #dock-thumbs:not([hidden]) { display: flex; } } /* One tile is a render's 4:3 at 40 by 30 with the transcript frame's line, corners and sunken ground; the spinner tile carries the cards' own spinner, small. The latest finished one sits on a stack (two edges stepping back behind it) when there are more, with how many in the corner chip the duration label uses. */ .dock-thumb { position: relative; box-sizing: border-box; width: 40px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--muted); overflow: hidden; cursor: pointer; transition: border-color .15s ease; } .dock-thumb img, .dock-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; } .dock-thumb.pending { display: grid; place-items: center; cursor: default; } .dock-thumb.pending .spinner { width: 14px; height: 14px; border-width: 2px; } button.dock-thumb:hover, button.dock-thumb:focus-visible { border-color: var(--accent-text); outline: none; } .dock-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .dock-play span { width: 12px; height: 12px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; } .dock-play svg { width: 6px; height: 6px; fill: currentColor; margin-left: 1px; } .dock-stack { position: relative; display: block; width: 40px; height: 30px; } .dock-stack.many { width: 48px; } .dock-stack.many::before, .dock-stack.many::after { content: ""; position: absolute; box-sizing: border-box; border: 1px solid var(--line); border-radius: 5px; } .dock-stack.many::before { left: 6px; top: 3px; width: 40px; height: 24px; background: var(--panel); } .dock-stack.many::after { left: 3px; top: 1.5px; width: 40px; height: 27px; background: var(--panel-2); } .dock-stack .dock-thumb { position: absolute; left: 0; top: 0; z-index: 1; } .dock-more { position: absolute; right: 0; bottom: -4px; z-index: 2; padding: 1px 4px; border-radius: 5px; pointer-events: none; background: rgba(0, 0, 0, .72); color: #fff; font-size: 10px; font-weight: 600; line-height: 12px; font-variant-numeric: tabular-nums; } /* ---- chat (middle) ---- */ #chat { height: 100%; min-width: 290px; /* app.js MIN_CHAT: the composer's one-line width */ display: flex; flex-direction: column; background: var(--panel); } #chat-header { display: flex; align-items: center; gap: 8px; min-height: var(--toolbar-h); padding: 0 18px; border-bottom: 1px solid var(--line); /* as tall as the player toolbar */ font-weight: 600; font-size: 14px; letter-spacing: .01em; } #chat-header .dot, #dock-lead .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; /* never squeezed by a long name or a narrow pane */ background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } #chat-header .dot[data-busy="true"], #dock-lead .dot[data-busy="true"] { animation: pulse 1.6s ease-in-out infinite; } /* the agent is working: the chat's activity line has the words */ /* The header names the open chat (app.js syncChatTitle) and never wraps: the name takes the room there is and is cut short; the Logs button and the save state keep their width at its right (design canvas page 28). It is a button that only works while the chats list is hidden (collapsible panes, below): the chats then drop down under it, and a chevron says so; disabled, it is the plain label. */ .title-menu { flex: 1 1 auto; min-width: 0; position: relative; margin: 0 0 0 -6px; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } .title-menu:not(:disabled) { padding-right: 24px; cursor: pointer; transition: background .15s ease; } #chat-title { min-width: 56px; } /* a narrow pane keeps a few letters of the name; the save state gives way first */ .title-menu:not(:disabled)::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .title-menu:not(:disabled):hover, .title-menu:not(:disabled):focus-visible, .title-menu[aria-expanded="true"] { background: var(--line); outline: none; } /* With no bound scene, the tutorial chooser replaces the unstarted chat's controls. Browsing the folder with an existing scene leaves its chat and controls visible and active. */ #chat.tutorial-chooser > :not(#chat-header):not(#tutorial-browser-intro), #chat.tutorial-chooser #chat-header > :not(#chat-title):not(#list-open) { display: none; } #tutorial-browser-intro { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 24px; } #tutorial-browser-intro[hidden] { display: none; } #tutorial-browser-intro h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; } #tutorial-browser-intro p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; } #chat-metrics { padding: 8px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.35; } /* ---- tutorial lesson card (above the composer, outside the scrolling transcript) ---- */ #tutorial-panel { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 12px; border-top: 1px solid var(--line); background: var(--panel-2); } #tutorial-panel[hidden] { display: none; } #tutorial-panel.placeholder #tutorial-eyebrow { display: none; } #tutorial-panel.placeholder #tutorial-demo-note { font-style: italic; } #tutorial-guide { text-decoration: none; } #tutorial-guide[hidden], .tutorial-library-bar[hidden] { display: none; } #tutorial-chapter-nav { display: flex; flex-direction: column; gap: 10px; } #tutorial-chapter-nav[hidden] { display: none; } #tutorial-chapters { flex: 1; min-width: 0; display: flex; gap: 6px; list-style: none; margin: 0 0 5px; padding: 0; font-size: 11px; line-height: 1.4; color: var(--muted); } /* Keep equal columns in one row; the button owns the bar so its entire area selects the chapter. */ #tutorial-chapters li { flex: 1 1 0; min-width: 0; display: flex; --chapter-line: var(--line); } #tutorial-chapters li[aria-current="step"] { --chapter-line: var(--accent-text); color: var(--ink); font-weight: 600; } #tutorial-chapters li.done { --chapter-line: var(--accent-text); } #tutorial-chapters button, #tutorial-chapters li > span { flex: 1; min-width: 0; padding: 6px 0 2px; border: 0; border-top: 3px solid var(--chapter-line); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; } #tutorial-chapters button { cursor: pointer; } #tutorial-chapters button:hover:not(:disabled) { color: var(--accent-text); text-decoration: underline; } #tutorial-chapters button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } #tutorial-chapters button:disabled { cursor: default; opacity: .6; } #tutorial-files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } #tutorial-files[hidden] { display: none; } .im-root #tutorial-files { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .tutorial-practice-note { flex-basis: 100%; color: var(--muted); font-size: 12px; line-height: 1.5; } .tutorial-screenshot-placeholder { min-height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px; margin-bottom: 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--panel-2); text-align: center; } .tutorial-screenshot-placeholder span { color: var(--muted); font-size: 12px; } #tutorial-chapters[hidden], #tutorial-auto[hidden] { display: none; } #tutorial-demo-note { color: var(--muted); font-size: 11.5px; line-height: 1.4; } #tutorial-demo-note:empty, #tutorial-error:empty { display: none; } #tutorial-error { color: var(--ink); font-size: 12.5px; line-height: 1.4; } #composer-request { display: flex; flex-direction: column; gap: 5px; } /* The suggested request's chrome lands on the box itself - one border, not a second one around the label and the row: the accent border while a suggestion stands, and the slow pulse of the box's shadow while it waits for Send. app.js keeps the classes on #composer-request, which tutorial-anchors.js's chat.prompt anchor reads. */ #composer-request.suggested-request .composer-box { border-color: var(--accent-text); } #tutorial-prompt-label { font-size: 11.5px; line-height: 1.4; color: var(--muted); } #composer-request.needs-action .composer-box { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); animation: tutorial-request-attention 2.4s ease-in-out infinite; } /* The next action uses the same green as tool guidance, distinct from the teal Send button. */ #composer-request.needs-action #send:not(:disabled):not([hidden]) { outline: 3px solid #339926; outline-offset: 3px; } @keyframes tutorial-request-attention { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 10%, transparent); } } @media (prefers-reduced-motion: reduce) { #composer-request.needs-action .composer-box { animation: none; } } #tutorial-prompt-label[hidden] { display: none; } .guided-reply::before { content: 'Guided example'; display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; } .guided-reply.tutorial-guide::before { content: 'Tutorial guide'; } .tutorial-guide-title { display: block; margin-bottom: 8px; } .tutorial-guide .guided-gallery { grid-template-columns: minmax(0, 1fr); } #tutorial-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; } #tutorial-verdict { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--muted); } #tutorial-verdict.met { color: var(--accent-text); } #tutorial-title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; } #tutorial-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 4px; } #tutorial-actions button, #tutorial-guide { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, opacity .15s ease; } #tutorial-actions button:hover:not(:disabled), #tutorial-actions button:focus-visible, #tutorial-guide:hover, #tutorial-guide:focus-visible { border-color: var(--accent-text); outline: none; } #tutorial-actions button:disabled { opacity: .45; cursor: default; } #tutorial-actions #tutorial-continue { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } #tutorial-actions .continue-designing, .continue-designing { padding: 8px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } #tutorial-actions .continue-designing { padding: 6px 12px; } #tutorial-actions .continue-designing:hover:not(:disabled), .continue-designing:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } #tutorial-actions .continue-designing:focus-visible, .continue-designing:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .continue-designing:disabled { opacity: .45; cursor: default; } #sample-panel { padding: 16px 18px; border-top: 1px solid var(--line); background: var(--panel-2); } #sample-panel[hidden] { display: none; } #sample-panel p { margin: 6px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; } #tutorial-auto { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; } #tutorial-auto input { accent-color: var(--accent); margin: 0; } /* The transcript flows bottom-up: the column is bottom-anchored (margin-top:auto on the first child), so the first user bubble sits just above the composer and everything shifts upward as replies stream in. */ #messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } #messages > :first-child { margin-top: auto; } .msg { white-space: pre-wrap; word-wrap: break-word; } /* user: grey chat bubble, right-aligned (light bubble on dark chrome, like the reference) */ .msg.user { align-self: flex-end; max-width: 84%; background: var(--user-bubble); color: var(--user-ink); padding: 11px 15px; border-radius: 16px; border-bottom-right-radius: 6px; } /* agent: no bubble - plain left-aligned prose */ .msg.agent { align-self: stretch; color: var(--ink); padding: 0 2px; } /* Markdown owns prose spacing; tutorial media, titles and share controls remain outside this wrapper. */ .agent-markdown { white-space: normal; overflow-wrap: anywhere; min-width: 0; } .agent-markdown > :first-child { margin-top: 0; } .agent-markdown > :last-child { margin-bottom: 0; } .agent-markdown p, .agent-markdown ul, .agent-markdown ol, .agent-markdown blockquote, .agent-markdown pre { margin: 0 0 10px; } .agent-markdown ul, .agent-markdown ol { padding-left: 24px; } .agent-markdown li > ul, .agent-markdown li > ol { margin-bottom: 0; } .agent-markdown h1, .agent-markdown h2, .agent-markdown h3, .agent-markdown h4, .agent-markdown h5, .agent-markdown h6 { font-size: 1em; line-height: 1.4; margin: 14px 0 6px; } .agent-markdown blockquote { border-left: 3px solid var(--line); padding-left: 12px; color: var(--muted); } .agent-markdown code { font-size: .9em; background: var(--panel-2); border-radius: 3px; padding: 1px 4px; } .agent-markdown pre { white-space: pre; overflow-x: auto; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); } .agent-markdown pre code { padding: 0; background: none; } .agent-markdown table { display: block; overflow-x: auto; border-collapse: collapse; margin-bottom: 10px; } .agent-markdown th, .agent-markdown td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; } /* URLs the agent writes (help-center articles, web sources) open in a new tab; the accent keeps them visible against the plain prose without turning the whole message into a link list. */ .msg a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 45%, transparent); word-break: break-all; } .msg a:hover, .msg a:focus-visible { border-bottom-color: var(--accent-text); outline: none; } /* ---- tutorial video cards (a [video:id] line in a tutor message) ---- */ .video-card { align-self: stretch; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); } .video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; } .video-caption { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; font-size: 12.5px; color: var(--muted); } .video-caption span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .video-caption button { flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .15s ease; } .video-caption button:hover, .video-caption button:focus-visible { border-color: var(--accent-text); outline: none; } /* Errors stay readable without overpowering the completed work; raw technical detail belongs in the export. */ .msg.error { align-self: stretch; color: var(--muted); font-size: 13px; font-weight: 400; padding: 0 2px; } /* model reasoning summaries: muted, smaller - "what the agent is thinking" between tool calls */ .msg.thought { align-self: stretch; color: var(--muted); font-size: 13.5px; padding: 0 2px; } /* streamed activity lines while the agent works ("Thinking…", "Using Arkio tool: …") */ .activity { align-self: stretch; color: var(--muted); font-size: 13px; padding: 0 2px; } .activity.current { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .activity.current { animation: none; } } /* collapsed per-turn summary once the turn completes (the "Worked for Xs" row) */ .worked { align-self: stretch; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding: 10px 2px 0; } /* Section line in Saved media: which deleted chat the media below came from, and when. */ .history-label { align-self: stretch; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); padding: 12px 2px 0; } .history-label:first-child { border-top: none; padding-top: 0; } /* Task model labels and development accounting stay visually subordinate to the conversation. */ .usage, .model-selection { align-self: stretch; color: var(--muted); font-size: 12px; line-height: 1.45; padding: 0 2px; } #empty { margin: auto; text-align: center; color: var(--muted); max-width: 260px; } #empty h2 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; } #empty p { margin: 0; font-size: 13px; } /* ---- composer ---- */ /* Drafts and attachments grow to their own scroll limits, leaving the action row and transcript reachable. */ #composer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-top: 1px solid var(--line); background: var(--panel-2); } #composer[hidden] { display: none; } /* Saved media has no one to talk to */ /* The box (design canvas page 30): the field across it, then one line inside its bottom edge with the settings' chips at the left and the squares and the arrow at the right. The agent composer (#composer-box) and the group chat's (.gc-composer) are built from these classes so the two cannot drift; what only one of them has is under its id. */ .composer-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: border-color .15s ease; } .composer-box:focus-within { border-color: var(--accent-text); } /* The Arkio AI terms notice under the box (agent-terms.js, index.html #ai-notice): one muted line behind a chevron, the full text and the Terms link once opened. The same muted size as the Export tab's line (.tx-legal). */ .ai-notice { margin: -2px 2px 0; font-size: 11px; line-height: 1.4; color: var(--muted); } .ai-notice > summary { display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; border-radius: 4px; } .ai-notice > summary::-webkit-details-marker { display: none; } .ai-notice > summary svg { flex: 0 0 auto; width: 11px; height: 11px; transition: transform .15s ease; } .ai-notice[open] > summary svg { transform: rotate(90deg); } .ai-notice > summary:hover { color: var(--ink); } .ai-notice > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } .ai-notice p { margin: 4px 0 0 16px; } #composer-dock .ai-notice { margin: 0 12px 6px; } /* The line under the box while the account has no AI credits (index.html #credits-needed): the notice's muted size, its button a link in the accent's text colour. */ .composer-credits { margin: -2px 2px 0; font-size: 11px; line-height: 1.4; color: var(--muted); } .composer-credits[hidden] { display: none; } .composer-credits button { padding: 0; border: 0; background: none; font: inherit; color: var(--accent-text); cursor: pointer; border-radius: 4px; } .composer-credits button:hover { text-decoration: underline; } .composer-credits button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } #composer-dock .composer-credits { margin: 0 12px 6px; } .composer-row { display: flex; align-items: center; gap: 6px; min-width: 0; } /* Under about 300 px of pane the line cannot hold even the icon chips, the three squares and the arrow (composer-chips.js fit sets data-wrap): the chips take the first line and the spacer pushes the buttons to the right of the next. */ .composer-row[data-wrap="true"] { flex-wrap: wrap; } .composer-row[data-wrap="true"] > #composer-options { flex: 0 0 100%; } .composer-spacer { flex: 1 1 auto; min-width: 0; } /* the squares: the camera, the paperclip and the mic (and the group chat's paperclip), 28 px in the chips' chrome */ .composer-square { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); cursor: pointer; transition: border-color .15s ease; } .composer-square svg { width: 15px; height: 15px; } .composer-square:hover:not(:disabled), .composer-square:focus-visible { border-color: var(--accent-text); outline: none; } .composer-square:disabled { opacity: .4; cursor: default; } /* the arrow: Send, in the filled accent the shell reserves for it, 30 px at the line's end; the group chat's too */ .composer-send { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 8px; background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: opacity .15s ease; } .composer-send svg { width: 16px; height: 16px; } .composer-send:hover:not(:disabled) { background: var(--accent-hover); } .composer-send:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } .composer-send:disabled { opacity: .4; cursor: not-allowed; } /* Stop takes the arrow's place while the agent works and nothing is drafted (app.js syncSendControls): a square in the chips' chrome, red only under the pointer, so the line stays about the next message rather than about stopping. */ #stop { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; } #stop svg { width: 15px; height: 15px; } #stop:hover { border-color: var(--danger); color: var(--danger); } #send[hidden], #stop[hidden] { display: none; } /* the hidden attribute has to beat the display above: one of the two stands at the line's end */ /* The field has the whole box: no frame of its own, two lines tall at rest, growing with the words (app.js autosize, group-chat.js autosize), then scrolling inside the viewport-relative cap. */ #input, #group-input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 40px; max-height: min(240px, 25dvh); resize: none; overflow-y: auto; overscroll-behavior-y: contain; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; line-height: 20px; } #input:focus, #group-input:focus { outline: none; } #input::placeholder, #group-input::placeholder { color: var(--muted); } /* The settings as chips (composer-chips.js): Model, Reasoning and Speed, each a button with the setting's icon, the chosen value and a chevron, its menu above it. The native selects stay in the DOM as the state app.js reads and writes: display:none, not the hidden attribute, which app.js toggles on the groups. data-values says which chips show their values (the fit): all, the model's only, or none, each then a 28 px square like the buttons. */ #composer-options { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: 6px; } #composer-options select { display: none; } .opt-group { position: relative; display: inline-flex; align-items: center; } .opt-group[hidden] { display: none; } .chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; transition: border-color .15s ease; } .chip:hover:not(:disabled), .chip:focus-visible { border-color: var(--accent-text); outline: none; } .chip[aria-expanded="true"] { border-color: var(--accent-text); background: var(--accent-soft); color: var(--accent-text); } .chip:disabled { opacity: .55; cursor: default; } .chip-icon, .chip-chevron { display: inline-flex; flex: 0 0 auto; } .chip-icon svg { width: 15px; height: 15px; } .opt-group[data-setting="reasoning"] .chip-icon svg { width: 17px; height: 17px; } /* the dial a size up: its needle has to read */ .chip-chevron svg { width: 10px; height: 10px; color: var(--muted); } .chip-value { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; } /* unknown catalog ids may be long */ #composer-options[data-values="none"] .chip, #composer-options[data-values="model"] .opt-group:not([data-setting="model"]) .chip { width: 28px; padding: 0; justify-content: center; } #composer-options[data-values="none"] .chip-value, #composer-options[data-values="none"] .chip-chevron, #composer-options[data-values="model"] .opt-group:not([data-setting="model"]) .chip-value, #composer-options[data-values="model"] .opt-group:not([data-setting="model"]) .chip-chevron { display: none; } /* the menu is the voice bar's picker (.vb-picker below), opening above the chip from its left edge; a long model list scrolls. While fit measures the line the menu leaves it: an open menu is not the line's width. */ .vb-picker.chip-menu { left: 0; right: auto; bottom: calc(100% + 6px); min-width: 160px; max-height: 50vh; overflow: auto; } .composer-row.is-fitting .chip-menu { display: none; } /* The render bar's selects (render-chip.js) keep the chrome the composer's settings wore before they became chips. */ #render-request select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; } #render-request select:focus { outline: none; border-color: var(--accent-text); } #render-request select:disabled { opacity: .55; cursor: default; } /* ---- AI render cards (in the transcript) ---- */ /* One grid per run of consecutive renders, so a multi-view request reads as one set. auto-fill against the pane width: two-up on a typical chat pane, one-up when the pane is dragged narrow - never a postage stamp. */ .renders { align-self: stretch; display: grid; gap: 10px; padding: 0 2px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .render-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* The frame is a real