/* Canonical MCP scenes, shared by /gallery and registered product cards. */
.mx-status { margin-left:auto; font-size:11px; color:#367559; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.mx-status::before { content:''; width:5px; height:5px; border-radius:50%; background:#4b9d73; }
.mx-tool { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ds-ink-50); line-height:18px; }
.mx-tool img { width:16px; height:16px; object-fit:contain; }
.mx-tool img[src*='union.svg'] { width:22px; height:14.7px; }
.mx-result-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--mx-line); }
.mx-result-row > img { width:19px; height:19px; object-fit:contain; flex-shrink:0; }
.mx-result-row > img:last-child { width:14px; height:14px; margin-left:auto; opacity:.45; }
.mx-result-row b { display:block; font-size:14px; line-height:20px; font-weight:500; }
.mx-result-row small { display:block; margin-top:4px; font-size:11px; line-height:16px; color:var(--ds-ink-50); }
.mx-mini-card { width:100%; max-width:410px; background:white; border:1px solid var(--mx-line); border-radius:14px; padding:24px; box-shadow:0 3px 8px #12172204; }
.mx-mini-card h3 { font:500 23px/29px var(--ds-font); letter-spacing:-.5px; margin:20px 0 8px; }
.mx-mini-card > p { font-size:13px; line-height:20px; color:var(--ds-ink-50); margin:16px 0 0; }
.mx-app-pair { display:flex; gap:16px; margin:22px 0; }
.mx-app-pair img { width:32px; height:32px; object-fit:contain; }
.mx-tool-server { display:flex; align-items:center; gap:10px; border-top:1px solid var(--mx-line); border-bottom:1px solid var(--mx-line); padding:18px 0; }
.mx-tool-server img { width:28px; height:28px; object-fit:contain; }
.mx-tool-server b { font-size:14px; font-weight:500; }
.mx-tool-server small { display:block; font-size:10px; color:var(--ds-ink-50); margin-top:4px; }
.mx-permission-user { display:flex; align-items:center; gap:12px; margin:26px 0 8px; }
.mx-permission-user img { width:30px; height:30px; padding:6px; background:var(--ds-surface-tint); border-radius:50%; }
.mx-permission-user b { font-size:15px; font-weight:500; }
.mx-permission-user small { display:block; font-size:11px; color:var(--ds-ink-50); margin-top:5px; }
.mx-private { display:flex; align-items:center; gap:8px; margin-top:20px; font-size:12px; color:var(--ds-ink-50); }
.mx-private img { width:15px; height:15px; }
.mx-key-value { display:flex; justify-content:space-between; gap:10px; padding:15px 0; border-bottom:1px solid var(--mx-line); font-size:13px; }
.mx-key-value span { color:var(--ds-ink-50); }.mx-key-value b { font-weight:500; }
.mx-approval { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; font-size:12px; }
.mx-approval span { padding:8px 14px; border:1px solid var(--mx-line); border-radius:6px; }
.mx-approval span:last-child { background:var(--ds-blue); color:white; border-color:transparent; }
.gi-kind-mcp { --mx-line:rgba(18,23,34,.1); }
.gi-kind-mcp .gi-composition { width:440px; }
.gi-kind-mcp .mx-mini-card { width:100%; max-width:none; padding:28px; }
.gi-kind-mcp .mx-mini-card > p { margin:16px 0 0; }
.gi-kind-mcp .mx-mini-card h3 { margin:20px 0 8px; }
.gi-kind-mcp .mx-tool img[src*="union"] { width:21px; height:14px; }

.mx-tools { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.mx-tools > span { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--mx-line); border-radius:100px; font-size:12px; line-height:16px; }
.mx-tools img { width:15px; height:15px; object-fit:contain; }
.mx-tools img[src*='union.svg'] { width:20px; height:13.4px; }
/* One optical canvas: 60px side insets, 24px above and below a 332px composition. */
.gi-scene.gi-canvas-unified > .gi-composition { width:440px; height:332px; margin-top:24px; align-self:start; justify-content:flex-start; }
.gi-canvas-unified :is(.ga-editorial,.ga-recap,.ga-search,.mx-mini-card) { width:100%; height:332px; }
.gi-canvas-unified .ga-paper { height:332px; display:flex; flex-direction:column; }
.gi-canvas-unified .ga-paper-footer { margin-top:auto; }
.gi-canvas-unified .ga-recap { display:flex; flex-direction:column; }
.gi-canvas-unified .ga-recap > p { margin-top:auto; }
.gi-canvas-unified .ga-recap-signal { margin:24px 0; }
.gi-canvas-unified .mx-mini-card { display:flex; flex-direction:column; padding:24px; }
.gi-canvas-unified .mx-mini-card > p { margin-top:auto; }
.gi-canvas-unified .ga-conversation { width:440px; height:332px; gap:16px; }
.gi-canvas-unified .ga-conversation > .ga-chat-thread { padding-inline:22px; }
.gi-canvas-unified .ga-conversation > .ga-home-composer.rd-prompt { width:100%; margin-top:auto; }
.gi-canvas-unified .ga-start { width:440px; height:332px; display:flex; flex-direction:column; justify-content:center; }
.gi-canvas-unified .ga-start > .ga-home-composer.rd-prompt { width:100%; }
.gi-canvas-unified .ga-start-suggestions { gap:6px; }
.gi-canvas-unified .ga-start-suggestions > span { padding-inline:8px; font-size:11px; }
.gi-canvas-unified .ga-conversation { gap:12px; }
.gi-canvas-unified .ga-home-chat { width:440px; height:332px; }
.gi-canvas-unified .ga-home-chat > .wd-chat { width:calc(440px / var(--chat-scale)); height:calc(332px / var(--chat-scale)); }
.gi-canvas-unified .ga-home-chat .wd-chat-head { width:100%; }
.gi-canvas-unified .ga-home-chat .ga-chat-mini.rd-prompt { width:calc(100% - 16px); }
.gi-canvas-unified .ga-home-chat .wd-bub--me p { width:160px; }
.gi-canvas-unified .ga-home-chat .wd-bub--res { width:190px; height:auto; padding:8px 10px; }
.gi-canvas-unified .ga-home-chat .wd-bub--res p { position:static; width:auto; }
/* A 60px bottom inset matches the 60px side insets of the 560px artboard. */
:is(.gallery-extra,.dock-illustration) .gi-scene.gi-canvas-unified { height:416px; }
.dock-illustration:has(.gi-canvas-unified) { height:calc(416px * var(--illustration-scale)); }
.assistant-ui { width:440px; height:332px; overflow:hidden; border:1px solid #12172218; border-radius:12px; box-shadow:var(--ga-shadow); background:white; font:12px/18px var(--ds-font); color:#202020; }
.assistant-ui img { width:15px; height:15px; object-fit:contain; flex-shrink:0; }
.assistant-ui label { display:block; font-size:11px; line-height:16px; margin:12px 0 5px; }
.au-brand { display:flex; align-items:center; justify-content:space-between; background:#f8f7f4; padding:12px 20px; border-bottom:1px solid #1217220c; }
.au-brand img { width:82px; height:auto; aspect-ratio:573/125; }.au-brand span { font-size:11px; color:#85857f; }
.au-project-body { padding:15px 22px; }.au-title { font-size:17px; line-height:22px; font-weight:500; display:flex; justify-content:space-between; }.au-title > span { font-size:19px; font-weight:400; }
.au-input { border:1px solid #e5e5e5; border-radius:6px; padding:7px 10px; font-size:12px; line-height:17px; background:white; }
.au-textarea { min-height:54px; }.au-visibility { display:flex; justify-content:space-between; margin-top:13px; font-size:11px; }.au-visibility > span:last-child { color:#60615c; }
.au-foot { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:15px; font-size:11px; }.au-foot > * { border:1px solid #e8e8e8; border-radius:6px; padding:5px 10px; line-height:17px; }.au-foot > b { color:white; background:#191919; border-color:#191919; font-weight:500; }
.au-gem { background:#f8fafd; font-family:Arial,sans-serif; }.au-gem-head { display:flex; align-items:center; gap:10px; padding:14px 20px 4px; }.au-gem-head > img { width:24px; height:24px; }.au-gem-head > b { font-size:14px; font-weight:500; }.au-gem-head > span { margin-left:auto; padding:5px 14px; border-radius:100px; background:#d3e3fd; color:#0b57d0; font-size:11px; }
.au-gem-body { padding:0 20px 20px; }.au-gem .au-input { border-color:transparent; border-radius:8px; }.au-gem .au-textarea { min-height:68px; line-height:18px; }.au-gem label small { color:inherit; font-size:11px; margin-left:6px; }.au-tool { display:flex; justify-content:space-between; margin-top:12px; font-size:10px; }.au-knowledge { display:flex; align-items:center; gap:8px; }.au-knowledge > img:last-child { margin-left:auto; }
.au-code { display:flex; background:#fcfcfa; }.au-code aside { flex:none; width:108px; padding:14px 8px; display:flex; flex-direction:column; gap:5px; border-right:1px solid #1217220a; background:#fafaf8; }.au-code-brand { font:15px/20px Georgia,serif; white-space:nowrap; padding:0 3px 15px; }.au-code aside > span { display:flex; align-items:center; gap:6px; font-size:10px; line-height:17px; padding:5px; }.au-code aside > span.is-current { background:#eeede9; border-radius:5px; }.au-code aside img { width:12px; height:12px; }.au-code aside > small { font-size:9px; color:#90908a; padding:14px 5px 3px; }.au-code aside .au-session { font-size:9px; color:#777; }
.au-code-main { display:flex; flex-direction:column; flex:1; min-width:0; padding:22px 14px 12px; }.au-code-greeting { display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; }.au-code-greeting img { width:20px; height:20px; }.au-code-context { margin:auto 0; text-align:center; color:#83837e; }.au-code-context > span { font-size:11px; }.au-code-context p { font-size:10px; line-height:16px; margin:5px 10px 0; }.au-code-tags { display:flex; gap:4px; margin-bottom:6px; }.au-code-tags span { padding:2px 5px; border:1px solid #e8e8e5; border-radius:4px; font-size:8px; line-height:13px; color:#75756f; }.au-code-input { padding:10px; background:white; border:1px solid #d4d4cf; border-radius:7px; font-size:11px; line-height:17px; }.au-code-input > span { display:block; text-align:right; color:#999; }.au-code-controls { display:flex; justify-content:space-between; padding:5px 3px 0; font-size:8px; }
/* Center the compact chat placeholder against its circular send action. */
.gi-scene .ga-home-chat .ga-chat-mini.rd-prompt { border-radius:999px; }
.ga-home-chat .ga-chat-mini .rd-ph { align-self:center; }

.gi-canvas-unified .ga-conversation > .ga-home-composer .rd-ph { padding:8px 0 0 12px; }
.gi-canvas-unified .ga-conversation .ga-user-question { font-size:16px; line-height:22px; }
/* Let the thread breathe at the larger message size within its shared canvas. */
.gi-canvas-unified .ga-conversation { gap:8px; }
.gi-canvas-unified .ga-conversation .ga-user-question { padding-block:8px; }
.gi-canvas-unified .ga-conversation .ga-answer-label { margin:12px 0 6px; }
.gi-canvas-unified .ga-conversation .ga-asset { margin-top:12px; }
.gi-scene.gi-canvas-unified .ga-conversation > .ga-home-composer.rd-prompt { height:96px; }

.gi-canvas-unified .ga-conversation .ga-user-question { max-width:80%; margin-left:auto; margin-right:0; }
/* Codex balances Claude Projects and Gemini Gems in the workflow row. */
.au-codex{background:#fff}.au-codex aside{background:#f7f7f7;width:114px;padding:14px 8px}.au-codex .au-code-brand{display:flex;align-items:center;gap:6px;font:600 13px/20px var(--ds-font);padding:0 4px 15px}.au-codex .au-code-brand img{width:17px;height:17px}.au-codex aside > span.is-current{background:#eaeaea}.au-codex .au-code-main{padding:14px 14px 12px}.au-codex-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#666}.au-codex .au-code-context{color:#1a1a1a}.au-codex .au-code-context > img{width:26px;height:26px;margin:0 auto}.au-codex .au-code-context :is(h3, .mx-ui-title){font:500 21px/28px var(--ds-font);letter-spacing:-.5px;margin:8px 0 4px}.au-codex .au-code-context > span{color:#888;font-size:10px}.au-codex .au-code-input{padding:12px;border:1px solid #e4e4e4;border-radius:14px;font-size:11px;line-height:17px;box-shadow:0 2px 4px #00000004}.au-codex-composer-bar{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:9px;color:#666}.au-codex-composer-bar > span:first-child{font-size:17px}.au-codex-composer-bar i{margin-left:auto;width:22px;height:22px;background:#161616;border-radius:50%;display:grid;place-items:center}.au-codex-composer-bar i img{width:13px;height:13px;filter:brightness(0) invert(1)}.au-codex .au-code-controls{padding-top:8px;color:#8b8b8b}.au-codex .au-code-controls > span{display:flex;align-items:center;gap:4px}.au-codex .au-code-controls img{width:10px;height:10px}

/* Dedicated agent outputs for the MCP gallery and landing page. */
.mx-agent-preview { display:flex; flex-direction:column; width:440px; height:332px; padding:24px; background:#fff; border:1px solid rgba(18,23,34,.1); border-radius:14px; box-shadow:0 1px 2px #1217220a,0 8px 20px -16px #12172233; color:var(--ds-ink); font-family:var(--ds-font); text-align:left; }
.mx-agent-label { display:flex; align-items:center; gap:8px; font-size:13px; line-height:18px; color:rgba(18,23,34,.62); }
.mx-agent-label img { width:18px; height:18px; }
.mx-agent-preview :is(h3, .mx-ui-title) { display:flex; align-items:center; gap:10px; margin:16px 0; font-size:21px; line-height:26px; letter-spacing:-.4px; font-weight:500; }
.mx-agent-preview :is(h3, .mx-ui-title) img { width:20px; height:20px; }
.mx-agent-details { display:flex; flex-direction:column; gap:12px; }
.mx-agent-detail b { display:block; font-size:14px; line-height:18px; font-weight:500; }
.mx-agent-detail p { margin:3px 0 0; font-size:14px; line-height:18px; color:rgba(18,23,34,.62); }
.mx-agent-preview .mx-agent-source { margin:auto 0 0; padding-top:12px; font-size:12px; line-height:16px; color:rgba(18,23,34,.62); }
/* The longer renewal brief remains fully visible inside the project dialog. */
.au-project .au-project-body { padding-top:12px; padding-bottom:12px; }
.au-project .au-textarea { font-size:12px; line-height:16px; }
.au-project .au-visibility { margin-top:10px; }