:root { --icon-size-rail: 24px; --icon-size-control: 20px; --icon-size-meta: 16px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: flex; overflow: hidden; color: var(--ink); background: var(--paper); font: var(--font-size-ui)/1.5 var(--font); }
button, textarea, select, input { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .5; }
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.icon-definitions, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.icon { width:var(--icon-size-control); height:var(--icon-size-control); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sidebar { width: 256px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 26px 16px 16px; }
.brand { color: var(--ink); text-decoration: none; font-size: 21px; font-weight: 650; letter-spacing: -.7px; padding: 0 12px; }
.brand span { font-size: 17px; font-weight: 400; color: var(--muted); margin-left: 3px; letter-spacing: -.3px; }
.brand { display: flex; align-items: center; gap: 6px; }
.brand img { width: 25px; height: 25px; object-fit: contain; margin-right: 3px; }
.rocoto-wordmark { font-family: var(--wordmark-font, var(--font)); }
.brand .rocoto-wordmark { font-family: var(--wordmark-font, var(--font)); font-size: 21px; font-weight: 650; letter-spacing: -.7px; margin-left: 0; color: var(--ink); }
.composer-agent { color: var(--muted); font-size:var(--font-size-ui); padding-left: 3px; }
.new-chat { display: flex; align-items: center; gap: 12px; margin: 26px 0 28px; padding: 11px 12px; border: 1px solid var(--border); background: var(--paper); border-radius: var(--radius); text-align: left; }
.new-chat:hover { border-color: var(--muted); }
.new-chat { margin-bottom: 10px; }
.agents-nav { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; margin-bottom: 28px; border: 0; background: transparent; border-radius: var(--radius); text-align: left; }
.agents-nav:hover, .agents-nav[aria-current="page"] { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.agents-nav .icon { color: var(--muted); }
.agents-active-count { margin-left: auto; color: var(--muted); font-size:var(--font-size-ui); }
.agents-nav:not(.library-nav) { margin-bottom: 4px; }
.library-nav { margin-bottom: 4px; }
.library-shortcut { margin-left: auto; flex-shrink: 0; color: var(--muted); }
.library-shortcut .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.library-shortcut + .connection-info { margin-left: 0; }
.library-shortcut[aria-pressed="true"] { color: var(--ink); }
.sidebar-caption { font-size:var(--font-size-ui); color: var(--muted); padding: 0 12px 10px; }
.chats-caption { display: flex; align-items: center; justify-content: space-between; padding-bottom: 5px; }
.chats-caption .icon-button { width: 28px; height: 28px; color: var(--muted); }
.chats-caption .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.chat-list { flex: 1; min-height: 40px; overflow: auto; }
.chat-link { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: transparent; padding: 11px 12px; border-radius: var(--radius); margin-bottom: 3px; }
.chat-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-link .chat-status { margin-left: auto; font-size: 10px; color: var(--muted); flex-shrink: 0; }
.chat-link .chat-status.running { color: var(--ink); }
.chat-link .chat-status.running::before { content: ""; display: inline-block; width: 5px; height: 5px; background: currentColor; margin-right: 4px; animation: pulse 1.5s ease-in-out infinite; }
.chat-link .icon { width:var(--icon-size-control); height:var(--icon-size-control); color: var(--muted); }
.chat-link.child-chat { width: calc(100% - 20px); margin-left: 20px; padding-left: 10px; border-left: 1px solid var(--border); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.chat-link.child-chat .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.chat-link:hover, .chat-link[aria-current="page"] { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.empty-chats { padding: 0 12px; font-size:var(--font-size-ui); color: var(--muted); }
.sidebar-footer { display: flex; gap: 10px; align-items: center; padding: 12px 10px 0; border-top: 1px solid var(--border); font-size:var(--font-size-ui); }
.sidebar-footer span:not(.avatar) { display: block; color: var(--muted); font-size: 11px; }
.sidebar-footer #workspace-owner { color: var(--ink); font-size:var(--font-size-ui); }
.avatar { display: grid; place-items: center; height: 32px; width: 32px; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); border-radius: var(--radius); font-size:var(--font-size-ui); }
.workspace { display: flex; flex-direction: column; min-width: 0; flex: 1; height: 100dvh; }
.topbar { min-height: 48px; padding: 0 32px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.chat-title { font-size:var(--font-size-ui); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.connection-status { margin-left: auto; white-space: nowrap; color: var(--muted); font-size:var(--font-size-ui); }
.connection-info { position: relative; margin-left: auto; flex-shrink: 0; }
.connection-status { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 0 8px 8px; list-style: none; }
.connection-status::-webkit-details-marker { display: none; }
.connection-dot { width: 6px; height: 6px; border-radius: var(--radius-lg); background: var(--muted); }
.connection-dot.online { background: var(--connection-online, var(--muted)); }
.connection-details { position: absolute; top: calc(100% + 6px); right: 0; width: 260px; max-width: calc(100vw - 28px); z-index: 12; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 9%, transparent); padding: 18px; font-size:var(--font-size-ui); }
.connection-details strong { display: block; color: var(--ink); font-size:var(--font-size-ui); margin-bottom: 12px; }
.connection-details p { color: var(--muted); margin: 7px 0; line-height: 1.5; }
.connection-details small { display: block; color: var(--muted); font-size: 10px; margin: 10px 0; }
.connection-details .text-button { margin-top: 8px; padding-left: 0; }
.home-mode-switch { display: flex; align-self: center; gap: 3px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin: 3px auto 8px; }
.home-mode-switch button { padding: 8px 17px; background: transparent; border: 0; color: var(--muted); font-size:var(--font-size-ui); border-radius: var(--radius); }
.home-mode-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent); }
.home-search-results { max-width: 1040px; margin: 32px auto; }
.search-status { color: var(--muted); font-size:var(--font-size-ui); padding: 20px 0; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; background: transparent; border: 0; }
.mobile-menu { display: none; }
.notice { width: min(820px, calc(100% - 48px)); margin: 0 auto 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--muted); font-size:var(--font-size-ui); }
.conversation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 32px 28px; }
.welcome { width: min(700px, 100%); margin: clamp(24px, 14vh, 170px) auto 40px; }
.welcome-icon { width: 31px; height: 31px; margin-bottom: 15px; color: var(--muted); }
h1 { font-size: clamp(27px, 3vw, 35px); line-height: 1.2; font-weight: 500; letter-spacing: -1px; margin: 0 0 12px; }
.welcome p { color: var(--muted); margin: 0; font-size:var(--font-size-ui); }
.suggestions { display: flex; flex-direction: column; max-width: 440px; margin-top: 32px; }
.suggestions button { display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; border: 0; border-bottom: 1px solid var(--border); padding: 14px 0; background: transparent; font-size:var(--font-size-ui); }
.suggestions button:hover { color: var(--accent); }
.suggestions .icon { width:var(--icon-size-control); height:var(--icon-size-control); color: var(--muted); }
.messages { max-width: 820px; margin: 0 auto; }
.chat-continuation { max-width: 820px; margin: 0 auto 20px; font-size:var(--font-size-ui); }
.chat-continuation a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.chat-continuation a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.chat-continuation .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.message { position: relative; margin: 4px 0; padding: 8px 0 28px; }
.message-actions { display:flex; align-items:center; gap:8px; position:absolute; bottom:0; left:0; color:var(--muted); opacity:0; pointer-events:none; }
.message:hover > .message-actions, .message:focus-within > .message-actions { opacity:1; pointer-events:auto; }
.message-user > .message-actions { left:auto; right:0; flex-direction:row-reverse; }
.message-actions .message-copy { width:28px; height:28px; padding:6px; }
.message-actions .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.message-timestamp { font-size:var(--font-size-code); font-variant-numeric:tabular-nums; }
@media (hover:none) { .message-actions { opacity:1; pointer-events:auto; } }
.message-user { display: flex; justify-content: flex-end; }
.user-text { padding: 12px 18px; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border-radius: var(--radius-lg); }
.assistant-label { display: flex; align-items: center; gap: 8px; font-size:var(--font-size-ui); font-weight: 600; margin-bottom: 12px; }
.assistant-label .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.assistant-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; }
.assistant-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.markdown-content { white-space: normal; }
.markdown-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.markdown-content > :first-child { margin-top: 0; }
.markdown-content > :last-child { margin-bottom: 0; }
.markdown-content p { margin: 0 0 1em; }
.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { margin: 1.3em 0 .5em; font-size: 1.08em; font-weight: 600; line-height: 1.4; letter-spacing: normal; }
.markdown-content ul, .markdown-content ol { padding-left: 1.5em; margin: .65em 0 1em; }
.markdown-content li + li { margin-top: .3em; }
.markdown-content blockquote { margin: 1em 0; padding-left: 1em; border-left: 2px solid var(--border); color: var(--muted); }
.markdown-content pre { overflow-x: auto; white-space: pre-wrap; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font: var(--font-size-code)/1.6 var(--font-code); }
.markdown-content code { font: var(--font-size-code)/1.6 var(--font-code); padding: 1px 4px; background: var(--surface); border-radius: var(--radius-sm); }
.markdown-content pre code { padding: 0; background: transparent; }
.markdown-table { max-width: 100%; overflow-x: auto; margin: 1em 0; }
.markdown-content table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9em; }
.markdown-content th, .markdown-content td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); padding: 8px 10px; overflow-wrap: normal; }
.markdown-content th { font-weight: 600; background: var(--surface); }
.markdown-content hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.tool-list { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:12px 0; }
.tool-list[hidden],.tool-call[hidden] { display:none; }
.tool-call { display:block; border:0; border-radius:0; background:transparent; font-size:var(--font-size-ui); color:var(--muted); min-width:0; }
.tool-call > summary { display:flex; align-items:center; gap:8px; width:fit-content; max-width:100%; padding:2px 0; cursor:pointer; list-style:none; }
.tool-call > summary::-webkit-details-marker { display:none; }
.tool-call > summary::marker { content:''; }
.tool-call > summary > .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); flex:0 0 var(--icon-size-meta); }
.tool-call > summary > span { min-width:0; overflow-wrap:anywhere; }
.tool-call > summary > .icon:last-child { opacity:0; }
.tool-call > summary:hover > .icon:last-child,.tool-call > summary:focus-within > .icon:last-child,.tool-call[open] > summary > .icon:last-child { opacity:.65; }
.tool-call[open] > summary > .icon:last-child { transform:rotate(90deg); }
.tool-call pre { max-height:360px; overflow:auto; padding:0; margin:10px 0 12px 24px; white-space:pre-wrap; overflow-wrap:anywhere; font:var(--font-size-code)/1.6 var(--font-code); color:var(--muted); }
.subchat-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.subchat-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--ink); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.subchat-card:hover { border-color: var(--muted); }
.subchat-card > span { min-width: 0; flex: 1; }
.subchat-card strong { display: block; font-size:var(--font-size-ui); font-weight: 500; }
.subchat-card small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.subchat-card .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.working { margin: 12px 0; color: var(--muted); font-size:var(--font-size-ui); }
.working::before { content: ""; display: inline-block; height: 7px; width: 7px; margin-right: 8px; background: var(--muted); border-radius: var(--radius); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.thumbnail-download { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 94%, transparent); color: var(--ink); text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.thumbnail-download .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.thumbnail-download:hover { background: var(--paper); }
.play-icon { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; color: var(--paper); background: color-mix(in srgb, var(--ink) 76%, transparent); border-radius: var(--radius); }
.retry-button { background: var(--surface); border: 1px solid var(--border); padding: 7px 12px; border-radius: var(--radius); margin-top: 12px; font-size:var(--font-size-ui); }
.composer-area { width: min(884px, 100%); padding: 0 32px 16px; margin: 0 auto; flex-shrink: 0; }
.workspace-picker { position: relative; margin: 0 0 8px 2px; width: fit-content; max-width: 100%; }
.workspace-bar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.workspace-bar .workspace-picker { min-width: 0; }
.session-screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.session-form { width: min(360px, 100%); }
.session-form > img { width: 36px; height: 36px; margin-bottom: 22px; }
.session-form h1 { font-size: 28px; }
.session-form p { color: var(--muted); font-size:var(--font-size-ui); }
.session-form label { display: block; font-size:var(--font-size-ui); margin-top: 28px; margin-bottom: 7px; }
.session-form input { display: block; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); color: var(--ink); outline-color: var(--accent); }
.session-form > button { width: 100%; padding: 12px; margin-top: 12px; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--paper); }
.session-form > .secondary-button { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.source-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-top: 28px; }
.source-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); text-align: left; }
.source-choice:hover { background: var(--surface); border-color: var(--muted); }
.source-choice strong { font-size:var(--font-size-ui); font-weight: 500; }
.source-choice small { color: var(--muted); font-size: 11px; }
.session-form #session-message { min-height: 22px; font-size:var(--font-size-ui); }
.session-pending > .sidebar, .session-pending > .workspace { visibility: hidden; }
.workspace-toggle { display: flex; align-items: center; gap: 7px; padding: 7px 9px; max-width: 100%; border: 0; border-radius: var(--radius); color: var(--muted); background: transparent; font-size:var(--font-size-ui); }
.workspace-toggle:hover, .workspace-toggle[aria-expanded="true"] { color: var(--ink); background: var(--surface); }
.workspace-toggle span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.workspace-toggle .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.workspace-toggle .workspace-chevron { transform: rotate(90deg); width: var(--icon-size-meta); height: var(--icon-size-meta); }
.workspace-popover { position: absolute; z-index: 12; left: 0; bottom: calc(100% + 7px); width: min(340px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 8px 35px color-mix(in srgb, var(--ink) 13%, transparent); }
.workspace-popover input { display: block; width: 100%; padding: 9px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size:var(--font-size-ui); outline-color: var(--accent); }
.workspace-options { max-height: min(280px, 40dvh); overflow-y: auto; padding-top: 6px; }
.workspace-option { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: var(--radius); background: transparent; text-align: left; }
.workspace-option:hover, .workspace-option[aria-pressed="true"] { background: var(--surface); }
.workspace-option > span { flex: 1; min-width: 0; }
.workspace-option strong { display: block; font-size:var(--font-size-ui); font-weight: 500; }
.workspace-option small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.workspace-option .icon { width:var(--icon-size-control); height:var(--icon-size-control); color: var(--muted); }
.workspace-empty { padding: 15px 10px; font-size:var(--font-size-ui); color: var(--muted); }
.message-queue { border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: 0 10px; padding: 4px 10px; background: var(--surface); font-size:var(--font-size-ui); max-height: 170px; overflow: auto; }
.queue-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; color: var(--muted); padding: 5px 2px; font-size:var(--font-size-ui); }
.queued-message { display: flex; align-items: center; gap: 10px; min-height: 42px; min-width: 0; }
.queued-message + .queued-message { border-top: 1px solid var(--border); }
.queued-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queued-thumbnail { flex-shrink: 0; width: 28px; height: 28px; object-fit: cover; border: 1px solid var(--border); border-radius: 5px; }
.queued-message .icon-button { width: 28px; height: 28px; flex-shrink: 0; color: var(--muted); }
.queued-message .icon { width: var(--icon-size-control); height: var(--icon-size-control); flex-shrink: 0; }
.queued-leading-icon { color: var(--muted); }
.queued-message .steer-button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px; color: var(--muted); font-size:var(--font-size-ui); }
.queued-menu { position: fixed; inset: auto; margin: 0; width: 168px; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 9%, transparent); }
.queued-edit { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; text-align: left; font: inherit; font-size:var(--font-size-ui); cursor: pointer; }
.queued-edit:hover:enabled { background: var(--surface); }
.queued-edit:disabled { color: var(--muted); cursor: default; }
@media (max-width: 600px) { .message-queue { margin: 0 5px; padding: 3px 7px; } .queued-message { gap: 5px; } }
.attachment-previews { display: flex; gap: 10px; margin-bottom: 9px; overflow-x: auto; padding: 4px; }
.attachment-preview { position: relative; flex-shrink: 0; width: 80px; }
.attachment-preview img { display: block; width: 80px; height: 65px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); }
.attachment-preview button { position: absolute; right: 2px; top: 2px; width: 23px; height: 23px; background: var(--paper); border-radius: var(--radius); }
.attachment-preview .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.attachment-preview span { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 3px; }
.user-attachments { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.user-attachments img { display: block; width: 160px; height: 120px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); }
.user-bubble { max-width: 85%; }
.user-bubble .user-text { max-width: initial; }
.steer-label { font-size: 10px; text-align: right; color: var(--muted); margin-bottom: 5px; }
.text-button { border: 0; background: transparent; padding: 6px; display: inline-flex; align-items: center; gap: 6px; font-size:var(--font-size-ui); }
.text-button:hover { color: var(--accent); }
.source-reference { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 11px; text-underline-offset: 3px; }
.relation-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 11px; }
.relation-label { font-weight: 500; }
.relation-status { flex-shrink: 0; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: 10px; }
.relation-status.rejected { border: 1px solid var(--border); }
.relation-link { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--accent); font-size: 11px; text-decoration: none; }
.relation-link:hover { text-decoration: underline; }
.relation-link .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); margin-top: 2px; }
.relation-review { margin-top: 9px; font-size: 10px; color: var(--muted); }
.relation-review summary { cursor: pointer; }
.relation-review p { margin: 8px 0 0; line-height: 1.55; }
.relation-review .review-label { display: block; font-weight: 600; margin-bottom: 3px; color: var(--ink); }
.structure-placeholder { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; }
.structure-placeholder h3 { margin: 0; }
.development-status { color: var(--muted); font-size: 10px; }
.structure-empty { grid-column: 1 / -1; border: 1px dashed var(--border); padding: 9px 10px; border-radius: var(--radius); color: var(--muted); font-size: 10px; }
.observation-text { font-size:var(--font-size-ui); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.observation-text.markdown-content { white-space: normal; }
.observation-status, .observation-model { color: var(--muted); font-size: 11px; }
.observation-model { display: block; margin-bottom: 6px; }
.observation-explanation { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
.composer { padding: 15px 15px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 3px 18px color-mix(in srgb, var(--ink) 4%, transparent); }
.composer:focus-within { border-color: color-mix(in srgb, var(--muted) 65%, var(--border)); }
textarea { display: block; width: 100%; resize: none; max-height: 180px; min-height: 32px; padding: 0 3px 8px; color: var(--ink); border: 0; background: transparent; outline: none; line-height: 1.5; }
textarea::placeholder { color: var(--muted); }
.composer-controls { display: flex; gap: 8px; align-items: center; }
.select-control select { max-width: 170px; font-size:var(--font-size-ui); color: var(--muted); border: 0; background: var(--surface); border-radius: var(--radius); padding: 7px 8px; cursor: pointer; }
.send-button { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border: 0; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.composer-note { font-size: 11px; color: var(--muted); text-align: center; padding-top: 9px; }
.sidebar-scrim { display: none; }
.library-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; max-width: 1240px; margin: 0 auto 24px; }
.library-heading h1 { font-size: 30px; margin-bottom: 8px; }
.library-heading p { margin: 0; font-size:var(--font-size-ui); color: var(--muted); }
.library-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.library-results-heading h2 { font-size: 18px; font-weight: 500; margin: 0; }
.workspace-help { color: var(--muted); font-size:var(--font-size-ui); line-height: 1.65; }
.library-collection select { background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; max-width: 200px; font-size:var(--font-size-ui); }
.workspace-message { max-width: 1240px; margin: 0 auto 20px; color: var(--muted); font-size:var(--font-size-ui); }
.workspace-message .source-choices { max-width: 750px; }
.library-more { margin-top: 14px; }
.library-empty { padding: 18px 12px; font-size:var(--font-size-ui); color: var(--muted); }
.library-download { text-decoration: none; }
@media (max-width: 1120px) {
  .library-back .icon { transform: rotate(180deg); }
}
.agents-view { flex: 1; min-height: 0; overflow: auto; padding: 22px 40px 40px; }
.agents-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; max-width: 1160px; margin: 0 auto 32px; }
.agents-heading h1 { font-size: 30px; margin-bottom: 8px; }
.agents-heading p { margin: 0; color: var(--muted); font-size:var(--font-size-ui); }
.agent-primary, .agent-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 40px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); font-size:var(--font-size-ui); white-space: nowrap; }
.agent-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.agent-primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
.agent-secondary:hover { background: var(--surface); }
.agent-secondary:disabled { cursor: default; }
.agent-primary .icon, .agent-secondary .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.agents-message { max-width: 1160px; margin: 0 auto 24px; font-size:var(--font-size-ui); color: var(--muted); }
.agents-message > .agent-secondary { margin-left: 12px; }
.agents-entry { max-width: 450px; margin: 12vh auto 0; text-align: center; }
.agents-entry > .icon { width:var(--icon-size-rail); height:var(--icon-size-rail); margin-bottom: 12px; }
.agents-entry h2 { font-size: 21px; font-weight: 500; color: var(--ink); margin: 0 0 8px; }
.agents-entry p { margin: 0 0 22px; line-height: 1.65; }
.agents-layout { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); max-width: 1160px; margin: 0 auto; gap: 36px; align-items: start; }
.agent-list { display: flex; flex-direction: column; gap: 4px; }
.agent-list-item { display: block; width: 100%; padding: 16px; text-align: left; background: var(--paper); border: 1px solid transparent; border-radius: var(--radius); }
.agent-list-item:hover { background: var(--surface); }
.agent-list-item[aria-current="true"] { background: var(--surface); border-color: var(--border); }
.agent-list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.agent-list-heading strong { font-size:var(--font-size-ui); font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; }
.agent-state { white-space: nowrap; color: var(--muted); font-size: 11px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.agent-state-active { color: var(--ink); }
.agent-state-active::before { content: ""; display: inline-block; width: 5px; height: 5px; background: currentColor; margin-right: 5px; border-radius: var(--radius-sm); }
.agent-list-meta, .agent-list-progress { display: block; color: var(--muted); font-size:var(--font-size-ui); margin-top: 7px; }
.agent-list-progress { font-size: 11px; margin-top: 3px; }
.agent-detail { min-width: 0; padding: 4px 0 20px 36px; border-left: 1px solid var(--border); }
.agent-detail-placeholder { color: var(--muted); font-size:var(--font-size-ui); }
.agent-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.agent-detail-mode { display: block; color: var(--muted); font-size:var(--font-size-ui); margin-bottom: 6px; }
.agent-detail h2 { font-size: 25px; font-weight: 500; line-height: 1.25; margin: 0; letter-spacing: -.5px; overflow-wrap: anywhere; }
.agent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.agent-detail-section { margin-top: 28px; }
.agent-detail h3, .agent-form-section h3 { font-size:var(--font-size-ui); font-weight: 600; margin: 0 0 10px; }
.agent-instruction { margin: 0; font-size:var(--font-size-ui); line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-settings { margin: 26px 0 0; font-size:var(--font-size-ui); }
.agent-settings > div { display: grid; grid-template-columns: minmax(115px, 35%) minmax(0, 1fr); gap: 16px; padding: 8px 0; }
.agent-settings dt { color: var(--muted); }
.agent-settings dd { margin: 0; overflow-wrap: anywhere; }
.agent-context-note { color: var(--muted); font-size:var(--font-size-ui); padding: 12px 14px; background: var(--surface); border-radius: var(--radius); margin: 14px 0 0; }
.agent-output { display: flex; align-items: flex-start; gap: 10px; font-size:var(--font-size-ui); }
.agent-output .icon { width:var(--icon-size-control); height:var(--icon-size-control); color: var(--muted); margin-top: 1px; }
.agent-output strong { font-weight: 500; }
.agent-output + .agent-output { margin-top: 14px; }
.agent-output p { font-size:var(--font-size-ui); color: var(--muted); margin: 3px 0 0; }
.agent-delivery-development { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--border); margin-top: 24px; padding-top: 15px; color: var(--muted); font-size:var(--font-size-ui); }
.agent-run { padding: 13px 0; border-bottom: 1px solid var(--border); }
.agent-run-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size:var(--font-size-ui); }
.agent-run-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.agent-run-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.agent-run-link .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.agent-run-status, .agent-run > small { font-size: 11px; color: var(--muted); }
.agent-run > small { display: block; margin-top: 4px; }
.agent-run-error { font-size:var(--font-size-ui); margin: 8px 0 0; overflow-wrap: anywhere; }
.agent-back { display: none; }
.agent-editor { position: fixed; inset: 0 0 0 auto; width: min(550px, 100vw); height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border); color: var(--ink); background: var(--paper); }
.agent-editor::backdrop { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.agent-editor form { height: 100%; display: flex; flex-direction: column; }
.agent-editor-header { display: flex; justify-content: space-between; gap: 16px; padding: 25px 24px 20px; border-bottom: 1px solid var(--border); }
.agent-editor h2 { font-size: 21px; font-weight: 500; margin: 0 0 5px; }
.agent-editor-header p { font-size:var(--font-size-ui); color: var(--muted); margin: 0; }
.agent-editor-body { overflow-y: auto; padding: 24px; flex: 1; min-height: 0; }
.agent-editor-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.agent-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; min-width: 0; }
.agent-editor-body > .agent-field:first-child { margin-top: 0; }
.agent-field > span { font-size:var(--font-size-ui); font-weight: 500; }
.agent-field input, .agent-field textarea, .agent-field select { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); color: var(--ink); outline-color: var(--accent); font-size:var(--font-size-ui); }
.agent-field textarea { resize: vertical; min-height: 105px; }
.agent-field small, .agent-field-help { font-size:var(--font-size-ui); line-height: 1.6; color: var(--muted); font-weight: 400; }
.agent-form-section { margin-top: 27px; }
.agent-form-section > .agent-field:first-of-type { margin-top: 0; }
.agent-mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0; margin: 0; border: 0; }
.agent-mode-options label { display: flex; align-items: center; gap: 7px; padding: 10px 8px; border: 1px solid var(--border); border-radius: var(--radius); font-size:var(--font-size-ui); cursor: pointer; }
.agent-mode-options label:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.agent-mode-options input { accent-color: var(--ink); margin: 0; }
.agent-field-help { margin: 10px 0 0; }
.agent-cadence { display: flex; align-items: center; gap: 10px; }
.agent-cadence input { width: 120px; }
.agent-cadence > span { font-size:var(--font-size-ui); color: var(--muted); }
.agent-limit-fields { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 18px; align-items: end; }
.agent-limit-fields .agent-field { margin-top: 0; }
.agent-credit-estimate { color: var(--ink); font-size:var(--font-size-ui); line-height: 1.6; margin: 14px 0 0; }
.agent-price { white-space: nowrap; }
.agent-form-error { margin: 18px 0 0; padding: 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); font-size:var(--font-size-ui); }
@media (max-width: 960px) {
  .agents-layout { display: block; }
  .agents-layout.has-selection .agent-list { display: none; }
  .agents-layout:not(.has-selection) .agent-detail { display: none; }
  .agent-detail { border-left: 0; padding-left: 0; }
  .agent-back { display: inline-flex; margin-bottom: 20px; padding-left: 0; border: 0; }
  .agent-back .icon { transform: rotate(180deg); }
}
.search-investigate-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 20px; }
.attachment-menu-anchor { position: relative; }
.attachment-menu-anchor > .icon-button { width: 28px; height: 28px; }
.attachment-menu { position: absolute; bottom: calc(100% + 12px); left: -4px; width: 216px; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 12%, transparent); background: var(--paper); z-index: 12; }
.attachment-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; border: 0; border-radius: var(--radius); background: transparent; text-align: left; font-size:var(--font-size-ui); }
.attachment-menu button:hover { background: var(--surface); }
[hidden] { display: none !important; }
@media (min-width: 1400px) { .sidebar { width: 272px; } .topbar { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 760px) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: min(290px, 84vw); transform: translateX(-100%); transition: transform .18s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; z-index: 19; inset: 0; width: 100%; height: 100%; border: 0; background: color-mix(in srgb, var(--ink) 28%, transparent); }
  body.sidebar-open .sidebar-scrim { display: block; }
  .mobile-menu { display: grid; }
  .topbar { min-height: 62px; padding: 0 14px 0 8px; gap: 6px; }
  .connection-status { font-size: 10px; }
  .home-mode-switch { margin-top: 0; }
  .home-search-results { margin-top: 20px; }
  .conversation { padding: 12px 20px 22px; }
  .library-heading { flex-wrap: wrap; gap: 16px; }
  .library-heading h1 { font-size: 26px; }
  .library-heading p { font-size:var(--font-size-ui); }
  .library-collection select { max-width: 100%; }
  .library-shortcut { font-size: 11px; padding-left: 4px; padding-right: 4px; }
  .library-shortcut .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
  .agents-view { padding: 18px 20px 32px; }
  .agents-heading { gap: 12px; margin-bottom: 26px; }
  .agents-heading h1 { font-size: 26px; }
  .agents-heading p { font-size:var(--font-size-ui); }
  .agents-heading > .agent-primary { padding: 9px 10px; font-size:var(--font-size-ui); }
  .agents-heading > .agent-primary .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
  .agents-entry { margin-top: 9vh; }
  .agent-editor-header { padding: 20px 18px 17px; }
  .agent-editor-body { padding: 20px 18px; }
  .agent-editor-footer { padding-left: 18px; padding-right: 18px; }
  .agent-detail h2 { font-size: 23px; }
  .welcome { margin-top: clamp(25px, 8vh, 90px); }
  .welcome p { max-width: 290px; font-size:var(--font-size-ui); }
  .suggestions { margin-top: 25px; }
  .suggestions button { font-size:var(--font-size-ui); }
  .composer-area { padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
  .composer { padding: 12px; }
  .workspace-bar { position: relative; }
  .workspace-picker { position: static; }
  .workspace-popover { left: 0; bottom: calc(100% + 7px); width: min(340px, calc(100vw - 24px)); }
  .select-control select { max-width: 145px; font-size: 11px; }
  .dataset-control { min-width: 0; }
  .dataset-control select { max-width: 132px; }
  .user-text { max-width: 94%; }
  .notice { width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }
@media (hover: none) { .thumbnail-download { opacity: 1; pointer-events: auto; width: 38px; height: 38px; } }
.sidebar { width: 72px; padding: 22px 12px 14px; position: relative; transform: none; z-index: 14; overflow: visible; }
.brand { justify-content: center; padding: 0; margin-bottom: 26px; }
.brand > span { display: none; }
.brand img { width: 27px; height: 32px; }
.sidebar > .new-chat, .sidebar > .agents-nav { width: 46px; height: 44px; justify-content: center; gap: 0; margin: 0 0 7px; padding: 11px; font-size: 0; border: 0; background: transparent; }
.sidebar > .new-chat:hover, .sidebar > button[aria-current="page"] { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); }
.sidebar > .agents-nav > span { display: none; }
.sidebar > button > .icon { width:var(--icon-size-rail); height:var(--icon-size-rail); color: var(--muted); }
.sidebar-footer { margin-top: auto; width: 46px; height: 46px; border: 0; justify-content: center; background: transparent; padding: 4px; border-radius: var(--radius-lg); }
.sidebar-footer > span:not(.avatar) { display: none; }
.sidebar-footer .avatar { width: 34px; height: 34px; color: var(--ink); font-weight: 500; font-size:var(--font-size-ui); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sidebar-footer:hover { background: var(--paper); }
.profile-menu { position: absolute; bottom: 15px; left: 65px; width: 236px; padding: 7px; z-index: 25; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 10px 34px color-mix(in srgb, var(--ink) 12%, transparent); }
.profile-menu-heading { display:flex; align-items:center; gap:10px; padding:10px 11px; border-bottom:1px solid var(--border); margin-bottom:4px; }
#profile-menu-name { min-width:0; font-size:var(--font-size-ui); font-weight:600; }
#profile-menu .profile-menu-heading .connection-info { margin:0 0 0 auto; border:0; }
#profile-menu .profile-menu-heading .connection-status { padding:0; font-size:12px; gap:5px; }
.profile-menu > button { width: 100%; text-align: left; display: block; padding: 10px 11px; border: 0; background: transparent; border-radius: var(--radius); font-size:var(--font-size-ui); }
.profile-menu > button:hover { background: var(--surface); }
.profile-menu .referral-stub { color: var(--muted); }
.profile-menu .referral-stub small { display: block; font-size: 10px; margin-top: 4px; }
.sidebar-caption, .chat-list { display: none; }
.chat-context-active .sidebar-caption, .chats-open .sidebar-caption { display: flex; position: fixed; left: 72px; top: 0; width: 248px; height: 112px; padding: 20px 12px 12px; flex-direction: column; align-items: stretch; gap: 12px; border-right: 1px solid var(--border); background: var(--surface); }
.new-context-chat { display: flex; align-items: center; gap: 9px; padding: 6px 4px; text-align: left; color: var(--ink); font-size:var(--font-size-ui); background: transparent; border: 0; border-radius: var(--radius); }
.new-context-chat:hover { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }
.chat-context-active .chat-list, .chats-open .chat-list { display: block; position: fixed; left: 72px; top: 112px; bottom: 0; width: 248px; padding: 0 10px 18px; border-right: 1px solid var(--border); background: var(--surface); }
.chat-context-active .workspace { padding-left: 248px; }
.chat-list-section > h2 { font-size: 10px; letter-spacing: .02em; font-weight: 500; color: var(--muted); margin: 19px 10px 8px; }
.chat-section-empty { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 8px 10px 18px; }
.chat-row { position: relative; display: flex; min-width: 0; }
.nested-chat-row { margin-left: 16px; border-left: 1px solid var(--border); }
.chat-row .chat-link { min-width: 0; padding: 10px; gap: 6px; font-size:var(--font-size-ui); margin: 0; }
.chat-row .chat-link > span:first-child { min-width: 0; flex: 1; }
.chat-row-actions { position: absolute; right: 2px; top: 2px; bottom: 2px; display: flex; align-items: center; opacity: 0; pointer-events: none; background: var(--surface); border-radius: var(--radius); }
.chat-row:hover .chat-row-actions, .chat-row:focus-within .chat-row-actions { opacity: 1; pointer-events: auto; }
.chat-row-actions .icon-button { width: 26px; height: 28px; color: var(--muted); }
.chat-row-actions .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.chat-active-spinner { width: 11px; height: 11px; flex-shrink: 0; border: 1.5px solid var(--border); border-top-color: var(--ink); border-radius: var(--radius-lg); animation: chat-spin .8s linear infinite; }
@keyframes chat-spin { to { transform: rotate(360deg); } }
.settings-nav { position: fixed; left: 72px; width: 194px; top: 0; bottom: 0; z-index: 8; background: var(--surface); border-right: 1px solid var(--border); padding: 29px 14px; }
.settings-nav > span { display: block; font-size:var(--font-size-ui); font-weight: 500; padding: 4px 10px 26px; }
.settings-nav > button { width: 100%; display: block; padding: 11px 10px; margin-bottom: 4px; text-align: left; font-size:var(--font-size-ui); border: 0; background: transparent; border-radius: var(--radius); }
.settings-nav > button:hover, .settings-nav > button[aria-current="page"] { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.settings-context-active .workspace { padding-left: 194px; }
.business-view, .marketplace-view { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 40px 40px; }
.business-content, .marketplace-content, .marketplace-tabs, .marketplace-filters, .archives-list { max-width: 1160px; margin: 0 auto; }
.business-onboarding { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 30px; }
.business-onboarding > div { flex: 1; }
.business-onboarding h2 { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.business-onboarding p { font-size:var(--font-size-ui); line-height: 1.5; color: var(--muted); margin: 0; }
.business-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 40px; }
.business-panel { min-width: 0; }
.business-panel h2 { font-size: 17px; font-weight: 500; margin: 0 0 20px; }
.business-panel h3, .marketplace-content h3 { font-size:var(--font-size-ui); margin: 24px 0 12px; }
.business-panel h2:not(:first-child) { margin-top: 34px; }
.business-description, .business-facts { font-size:var(--font-size-ui); line-height: 1.75; overflow-wrap: anywhere; }
.business-description { white-space: pre-wrap; }
.business-facts { padding-left: 20px; }
.business-profile-editor { margin-top: 22px; font-size:var(--font-size-ui); }
.business-profile-editor > summary { cursor: pointer; padding: 12px 0; }
.business-profile-editor .agent-primary, .business-panel .agent-secondary { margin-top: 16px; }
.connection-draft-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 18px; font-size:var(--font-size-ui); }
.connection-draft-card > strong { display: block; margin-bottom: 10px; }
.connection-draft-card p { line-height: 1.6; }
.connection-draft-card > small { color: var(--muted); }
.usage-dialog, .connection-editor, .skill-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); background: var(--paper); }
.usage-dialog::backdrop, .connection-editor::backdrop, .skill-dialog::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.usage-dialog h2, .connection-editor h2, .skill-dialog h2 { margin: 0 0 6px; font-size: 21px; font-weight: 500; }
.usage-content, .connection-editor-body, .skill-content { padding: 0 24px 26px; }
.usage-content h3, .skill-content h3 { font-size:var(--font-size-ui); margin: 24px 0 12px; }
.usage-content progress { width: 100%; height: 5px; accent-color: var(--ink); }
.usage-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.usage-stats > div { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.usage-stats span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.usage-stats strong { display: block; font-size: 21px; font-weight: 500; white-space: nowrap; }
.usage-limit-form .agent-secondary { margin-top: 12px; }
.usage-billing { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; font-size:var(--font-size-ui); }
.usage-plan-details { font-size:var(--font-size-ui); margin: 16px 0; }
.usage-plan-details dd { overflow-wrap: anywhere; }
.context-anchor { position: relative; margin-left: auto; }
.composer-controls .send-button { margin-left: 0; }
.context-ring { display: grid; place-items: center; width: 26px; height: 26px; background: transparent; border: 0; padding: 0; }
.context-ring svg { width: 22px; height: 22px; fill: none; stroke-width: 2; transform: rotate(-90deg); }
.context-track { stroke: var(--border); }
.context-value { stroke: var(--muted); stroke-dasharray: 0 50.265; stroke-linecap: round; }
.context-tooltip { position: absolute; bottom: calc(100% + 12px); right: 0; width: max-content; max-width: 240px; padding: 10px 12px; background: var(--ink); color: var(--paper); font-size: 11px; line-height: 1.5; border-radius: var(--radius); z-index: 10; }
.marketplace-heading { align-items: flex-start; gap: 24px; margin-bottom: 28px; }
.marketplace-heading h1 { display: block; font-size: 24px; letter-spacing: -.5px; margin: 0 0 10px; }
.marketplace-heading p { margin: 0; font-size: var(--font-size-ui); }
.marketplace-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.marketplace-heading-actions .marketplace-search { flex: 0 1 300px; }
#customize-context > .context-section-label { margin: 30px 10px 12px; padding: 0; color: var(--muted); font-size: var(--font-size-ui); font-weight: 400; }
.agent-catalogue-grid { gap: 16px; }
.agent-catalogue-grid .marketplace-item { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.agent-catalogue-grid .marketplace-card { min-height: 180px; padding: 20px 56px 20px 20px; border: 0; border-radius: var(--radius-lg); height: 100%; }
.agent-catalogue-grid .marketplace-card strong { margin-top: 0; }
.agent-catalogue-grid .marketplace-card small { font-size: var(--font-size-ui); line-height: 1.4; }
.agent-catalogue-grid .catalogue-add { top: 15px; right: 12px; }
.agent-catalogue-grid .marketplace-card:focus-visible { outline-offset: -4px; }
@media(max-width:1000px) { .marketplace-heading { flex-wrap: wrap; } .marketplace-heading-actions { flex: 1; } }
@media(max-width:640px) { .marketplace-heading { flex-direction: column; align-items: stretch; gap: 16px; } .marketplace-heading-actions { width: 100%; flex: none; flex-wrap: wrap; justify-content: flex-start; } .marketplace-heading-actions .marketplace-search { width: 100%; flex: 1 1 100%; margin: 0; } .agent-catalogue-grid .marketplace-card { min-height: 150px; } }
.marketplace-tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.marketplace-tabs button { border: 0; background: transparent; padding: 12px 4px; font-size:var(--font-size-ui); color: var(--muted); }
.marketplace-tabs button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px var(--ink); }
.marketplace-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; }
.marketplace-filters select { appearance: none; min-width: 0; max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); color: var(--muted); font: inherit; font-size: var(--font-size-ui); cursor: pointer; }
.marketplace-content > h2 { font-size: 16px; font-weight: 500; margin: 22px 0; }
.marketplace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.marketplace-card { display: flex; align-items: start; gap: 16px; padding: 24px 6px; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; }
.marketplace-card:hover { background: var(--surface); }
.marketplace-card img { width:var(--icon-size-control); height:var(--icon-size-control); object-fit: contain; padding:0; flex-shrink: 0; }
.marketplace-card > span { min-width: 0; }
.marketplace-card strong, .marketplace-card span > span, .marketplace-card small { display: block; }
.marketplace-card strong { font-size:var(--font-size-ui); font-weight: 500; margin: 2px 0 7px; }
.marketplace-card span > span { font-size:var(--font-size-ui); color: var(--muted); line-height: 1.6; }
.marketplace-card small { font-size: 10px; color: var(--muted); margin-top: 10px; }
.connection-detail-title { display: flex; align-items: center; gap: 20px; margin: 32px 0 24px; }
.connection-detail-title img { width: 64px; height: 64px; object-fit: contain; }
.connection-detail-title h2 { font-weight: 500; margin: 0 0 10px; }
.skill-instructions { font-size:var(--font-size-ui); line-height: 1.7; white-space: pre-wrap; margin-bottom: 24px; }
.agents-skills-link { margin: -6px 0 24px; padding-left: 0; }
.archives-list > article { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding: 16px 0; font-size:var(--font-size-ui); }
.business-chat-drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(560px, 46vw); z-index: 18; background: var(--paper); border-left: 1px solid var(--border); box-shadow: -8px 0 30px color-mix(in srgb, var(--ink) 6%, transparent); display: flex; flex-direction: column; }
.business-chat-drawer > header { display: flex; gap: 10px; align-items: center; padding: 16px; border-bottom: 1px solid var(--border); }
.business-chat-drawer > header strong { flex: 1; font-size:var(--font-size-ui); font-weight: 500; }
.business-chat-drawer iframe { width: 100%; flex: 1; min-height: 0; border: 0; }
.drawer-mode .sidebar, .drawer-mode .topbar, .drawer-mode .home-mode-switch, .drawer-mode .settings-nav { display: none !important; }
.drawer-mode .workspace { padding-left: 0 !important; }
.drawer-mode .conversation { padding: 18px 20px; }
.drawer-mode .welcome { margin-top: 45px; }
.drawer-mode .welcome h1 { font-size: 24px; }
.drawer-mode .suggestions { display: none; }
.drawer-mode .composer-area { padding: 12px; }
.mobile-menu { display: none; }
@media (max-width: 960px) { .business-layout { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 760px) {
  .sidebar { width: 56px; padding: 20px 6px 12px; }
  .sidebar > .new-chat, .sidebar > .agents-nav, .sidebar-footer { width: 42px; }
  .profile-menu { left: 49px; width: 230px; }
  .chat-context-active .workspace, .settings-context-active .workspace { padding-left: 0; }
  .chat-context-active .sidebar-caption, .chat-context-active .chat-list { display: none; }
  .chats-open .sidebar-caption { display: flex; left: 56px; width: min(264px, calc(100vw - 64px)); }
  .chats-open .chat-list { display: block; left: 56px; width: min(264px, calc(100vw - 64px)); box-shadow: 8px 8px 25px color-mix(in srgb, var(--ink) 10%, transparent); }
  .settings-nav { position: static; width: auto; padding: 0 12px; border: 0; background: var(--paper); display: flex; overflow-x: auto; flex-shrink: 0; }
  .settings-nav > span { display: none; }
  .settings-nav > button { width: auto; white-space: nowrap; padding: 10px; font-size: 11px; }
  .topbar { padding: 0 12px; min-height: 60px; }
  .topbar .library-shortcut { display: none; }
  .topbar .connection-info { margin-left: auto; }
  .chat-title { font-size:var(--font-size-ui); }
  .business-view, .marketplace-view, .agents-view { padding: 18px 16px 30px; }
  .business-onboarding { align-items: start; flex-wrap: wrap; padding: 16px; }
  .business-onboarding > .icon { display: none; }
  .business-onboarding > div { flex-basis: 100%; }
  .business-onboarding h2 { font-size:var(--font-size-ui); }
  .marketplace-grid { grid-template-columns: 1fr; }
  .marketplace-tabs { gap: 10px; }
  .marketplace-tabs button { font-size: 11px; }
  .marketplace-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketplace-filters select { width: 100%; min-width: 0; max-width: 100%; font-size: var(--font-size-ui); }
  .business-chat-drawer { width: calc(100vw - 56px); }
  .search-investigate-bar { flex-wrap: wrap; }
  .search-investigate-bar .agent-primary { font-size: 11px; }
  .usage-content, .connection-editor-body, .skill-content { padding-left: 18px; padding-right: 18px; }
}
@media (hover: none) { .chat-row-actions { position: static; opacity: 1; pointer-events: auto; } }

.observer-control { display: grid; gap: 8px; padding: 12px 8px; font-size: 11px; color: var(--muted); }
.observer-control select { padding: 9px; width: 100%; color: var(--ink); background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); font-size: 11px; }
.viewing-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 24px; border-bottom: 1px solid var(--border); background: var(--surface); font-size:var(--font-size-ui); flex-shrink: 0; }

.skills-menu-parent { position: relative; }
.skills-menu-parent > button { width: 100%; }
.skills-menu-parent > button .icon:last-child { margin-left: auto; width:var(--icon-size-control);  height:var(--icon-size-control); }
.skills-submenu { position: absolute; left: calc(100% - 1px); bottom: 0; width: 240px; max-height: 380px; overflow-y: auto; padding: 8px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent); }
.skills-submenu button { width: 100%; }
#installed-skill-options { border-bottom: 1px solid var(--border); margin-bottom: 6px; padding-bottom: 6px; }
#installed-skill-options p { padding: 8px; }
.attachment-menu .menu-highlight { background: var(--surface); }
.selected-skills, .message-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.selected-skill, .message-skills > span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 11px; }
.selected-skill .icon-button { width: 22px; height: 22px; }
.connection-stack { display: flex !important; align-items: center; margin-top: 10px; }
.connection-stack img, .connection-initial { width:var(--icon-size-meta); height:var(--icon-size-meta); padding:0; margin-right: -4px; border: 1px solid var(--border); background: var(--paper); border-radius: var(--radius); }
.connection-stack > span:last-child { margin-left: 8px; font-size: 10px; }
@media (max-width: 760px) { .skills-submenu { left: 12px; bottom: calc(100% - 4px); width: 238px; max-height: 280px; } }
.tool-output-label { margin: 10px 0 4px; font-size: 11px; color: var(--muted); }

.chat-section-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 7px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: var(--font-size-ui); font-weight: 600; }
.chat-section-toggle .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); transform: rotate(90deg); }
.chat-section-toggle[aria-expanded="false"] .icon { transform: none; }
.agents-context-active .workspace { padding-left: 248px; }
.agent-context { position: fixed; left: 72px; top: 0; bottom: 0; width: 248px; padding: 24px 10px; background: var(--surface); border-right: 1px solid var(--border); z-index: 8; overflow-y: auto; }
.agent-context > .new-context-chat { padding: 10px; margin-bottom: 22px; width: 100%; }
.agent-context .agent-list { display: block; border: 0; padding: 0; max-height: none; overflow: visible; }
.agent-context .agent-list-item { padding: 14px 10px; margin-bottom: 5px; background: transparent; border: 0; }
.agent-context .agent-list-item[aria-current="true"], .agent-context .agent-list-item:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.agent-list-heading strong { font-size:var(--font-size-ui); }
.agent-list-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.6; margin: 7px 0; }
.agents-heading { justify-content: flex-end; gap: 10px; min-height: 44px; }
#agents-skills-link { background: var(--surface); color: var(--muted); }
.agents-layout { display: block; }
.agents-entry { min-height: 430px; justify-content: center; }
@media (max-width: 760px) { .agents-context-active .workspace { padding-left: 0; } .agent-context { display: none; left: 56px; width: min(264px, calc(100vw - 64px)); box-shadow: 8px 8px 25px color-mix(in srgb, var(--ink) 10%, transparent); } .agents-list-open .agent-context { display: block; } .agents-heading { gap: 7px; } .agents-heading > button { font-size: 11px; padding: 9px; } }


.context-nav { position: fixed; top: 0; bottom: 0; left: 72px; width: 248px; padding: 29px 14px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); z-index: 8; }
.context-nav > span { display: block; font-size:var(--font-size-ui); font-weight: 500; padding: 4px 10px 26px; }
.context-nav button { width: 100%; display: block; text-align: left; padding: 11px 10px; margin-bottom: 4px; border: 0; border-radius: var(--radius); font-size:var(--font-size-ui); background: transparent; }
.context-nav button:hover, .context-nav button[aria-current="page"] { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.context-nav .context-subitem, .context-nav .nested-source, .context-nav .context-connection { width: calc(100% - 15px); margin-left: 15px; }
.context-connection small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.context-nav .context-source { display: flex; align-items: center; gap: 9px; }
.context-source .icon { width:var(--icon-size-control); height:var(--icon-size-control); color: var(--muted); }
.customize-context-active .workspace { padding-left: 248px; }
.marketplace-item { display: flex; position: relative; align-items: start; }
.marketplace-item .marketplace-card { width: 100%; border-bottom: 0; padding-right: 68px; }
.catalogue-add { position: absolute; right: 4px; top: 25px; display: flex; gap: 4px; align-items: center; padding: 6px 7px; font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); }
.catalogue-add .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.catalogue-add:hover { color: var(--ink); background: var(--surface); }
@media (max-width: 760px) { .customize-context-active .workspace { padding-left: 0; } .context-nav { display: none; left: 56px; width: min(264px, calc(100vw - 64px)); box-shadow: 8px 8px 25px color-mix(in srgb, var(--ink) 10%, transparent); } .context-nav-open .context-nav:not([hidden]) { display: block; } }

.agent-empty-art { width: min(500px, 100%); min-height: 260px; border-radius: var(--radius-lg); overflow: hidden; display: grid; place-items: center; padding: 26px; background: linear-gradient(color-mix(in srgb, var(--paper) 66%, transparent), color-mix(in srgb, var(--paper) 66%, transparent)), url('/static/harness/assets/monet-water-lilies.jpg') center 44% / cover; }
.agent-empty-copy { display: grid; justify-items: center; gap: 20px; }
.agent-empty-copy p { color: var(--ink); font-size: 21px; line-height: 1.5; max-width: 320px; margin: 0; text-align: center; }
.agent-art-credit { margin-top: 12px; color: var(--muted); font-size: 10px; }
@media (max-width: 760px) { .agent-empty-art { min-height: 240px; padding: 22px; } .agent-empty-copy p { font-size: 18px; } .agent-art-credit { max-width: 230px; line-height: 1.5; } }

.usage-popover { position: absolute; width: 330px; right: -38px; bottom: calc(100% + 18px); z-index: 26; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
#usage-popover-content { padding: 20px 20px 6px; }
.compact-usage-section { margin-bottom: 20px; }
.compact-usage-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size:var(--font-size-ui); }
.compact-usage-heading strong { font-weight: 500; }
.compact-usage-heading span { color: var(--muted); }
.compact-usage-section progress { appearance: none; display: block; width: 100%; height: 5px; border: 0; border-radius: var(--radius); overflow: hidden; }
.compact-usage-section progress::-webkit-progress-bar, .usage-empty-track { background: var(--border); }
.compact-usage-section progress::-webkit-progress-value { background: var(--ink); border-radius: var(--radius); }
.usage-empty-track { width: 100%; height: 5px; border-radius: var(--radius); }
.compact-usage-section small { display: block; color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 8px; }
.compact-credit-row { display: flex; justify-content: space-between; gap: 14px; font-size:var(--font-size-ui); padding: 15px 0; border-top: 1px solid var(--border); }
.compact-credit-row strong { font-weight: 500; }
#usage-breakdown { width: 100%; border: 0; border-top: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; gap: 9px; background: var(--surface); color: var(--ink); text-align: left; font-size: 11px; }
#usage-breakdown .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
#usage-breakdown .icon:last-child { margin-left: auto; }
.usage-settings-view .usage-content { width: min(760px, 100%); margin: 0 auto; padding: 0 0 32px; }
.composer { position: relative; }
.command-menu { position: absolute; bottom: calc(100% + 10px); left: 0; width: min(430px, 100%); max-height: 330px; overflow-y: auto; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent); z-index: 22; }
.command-menu-label { padding: 8px 10px; color: var(--muted); font-size: 10px; }
.command-option { display: flex; width: 100%; gap: 11px; padding: 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); text-align: left; align-items: center; }
.command-option[aria-selected="true"], .command-option:hover { background: var(--surface); }
.command-option > .icon, .command-option > img { width:var(--icon-size-control); height:var(--icon-size-control); object-fit: contain; flex-shrink: 0; }
.command-option strong { display: block; font-size:var(--font-size-ui); font-weight: 500; }
.command-option small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.selected-skill { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); color: var(--accent); }
.selected-skill-open { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11px; border: 0; background: transparent; padding: 3px 2px; }
.selected-skill-open .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.agent-list-summary { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.agent-outcome { font-size:var(--font-size-ui); line-height: 1.6; }
.agent-frequency { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size:var(--font-size-ui); margin: 22px 0; }
.agent-frequency .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.agent-technical { margin: 25px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); font-size:var(--font-size-ui); }
.agent-technical > summary { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.agent-technical > summary .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.agent-technical .agent-instruction { font-size:var(--font-size-ui); margin-top: 14px; }
@media (max-width: 760px) { .usage-popover { width: min(310px, calc(100vw - 80px)); right: -36px; } }

.usage-popover { width: 390px; max-height: min(640px, calc(100dvh - 160px)); overflow-y: auto; }
.compact-usage-section progress { accent-color: var(--accent); }
.compact-usage-section progress::-webkit-progress-value { background: var(--accent); }
.compact-usage-heading > span { white-space: nowrap; }
.usage-billing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.agent-detail-list { padding-left: 20px; font-size:var(--font-size-ui); line-height: 1.7; }
.settings-nav button, .profile-menu > button, #customize-context button, .home-mode-switch button { display: flex; align-items: center; gap: 8px; }
.settings-nav button .icon, .profile-menu > button .icon, #customize-context button .icon, .home-mode-switch button .icon { width:var(--icon-size-control); height:var(--icon-size-control); flex-shrink: 0; }
@media (max-width: 760px) { .usage-popover { width: min(330px, calc(100vw - 76px)); right: -28px; } .compact-usage-heading { font-size: 11px; } }
/* Investigation controls and activity follow the parent conversation. */
.delegate-icon { width:28px; height:28px; flex:0 0 28px; fill:var(--accent); filter:hue-rotate(var(--delegate-hue)); }
.delegate-row-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.delegate-row-copy > span,.delegate-row-copy > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.delegate-row-copy > small { color:var(--muted); font-size:var(--font-size-ui); font-weight:400; }
.nested-chat-row { margin-left:14px; }
.nested-chat-row .chat-link { gap:8px; padding:8px 6px; }
.subagent-header { margin:0 0 28px; }
.subagent-title { display:flex; align-items:center; gap:12px; margin:18px 0 4px; }
.subagent-title .delegate-icon { width:40px; height:40px; }
.subagent-title h1 { margin:0; font-size:22px; font-weight:550; }
.return-parent .icon { transform:rotate(180deg); }
.subchat-heading { padding:8px 0; font-size:var(--font-size-ui); color:var(--muted); }
.subchat-list { gap:3px; margin:14px 0; }
.subchat-card { border:0; background:transparent; padding:9px 8px; gap:10px; }
.subchat-card strong { font-weight:500; font-size:var(--font-size-ui); }
.subchat-card small { max-width:480px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subchat-card:hover { background:var(--surface); }
.live-activity { display:flex; flex-direction:column; gap:9px; margin:10px 0 18px; color:var(--muted); font-size:var(--font-size-ui); }
.activity-row { display:flex; align-items:flex-start; gap:9px; line-height:1.5; }
.activity-row .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); margin-top:2px; flex:0 0 var(--icon-size-meta); }
.current-activity { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:pre-line; }
.activity-shimmer { animation:activity-glisten 2.4s ease-in-out infinite; animation-delay:var(--activity-delay,0ms); }
.current-activity.activity-shimmer,.subchat-card small.activity-shimmer { background:linear-gradient(105deg,var(--muted) 20%,var(--ink) 47%,var(--muted) 75%); background-size:240% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:activity-glisten-text 2.4s linear infinite; animation-delay:var(--activity-delay,0ms); }
@keyframes activity-glisten { 0%,100% { opacity:.68; } 50% { opacity:1; } }
@keyframes activity-glisten-text { from { background-position:100% 0; } to { background-position:-100% 0; } }
.completed-activity { margin:8px 0 16px; }
.company-category { margin:11px 11px 5px; font-size:11px; font-weight:500; color:var(--muted); }
.company-code-action { display:flex; align-items:center; gap:9px; width:100%; padding:11px; margin-top:8px; border:0; border-top:1px solid var(--border); background:transparent; color:var(--ink); text-align:left; }
.company-code-action:hover { background:var(--surface); }
.command-back { display:flex; align-items:center; gap:6px; padding:6px 9px; border:0; background:transparent; color:var(--muted); font-size:var(--font-size-ui); }
.command-back .icon { transform:rotate(180deg); width:var(--icon-size-control);  height:var(--icon-size-control); }
.connection-skill { display:flex; align-items:flex-start; flex-wrap:wrap; text-align:left; margin:8px 0; }
.connection-skill small { display:block; flex:0 0 100%; color:var(--muted); padding-left:25px; }
.marketplace-art { isolation:isolate; position:relative; overflow:hidden; min-height:200px; border-radius:var(--radius); margin:18px 0 25px; display:grid; place-items:center; padding:28px; background:var(--surface); }
.marketplace-art::before { content:''; position:absolute; inset:0; z-index:-2; background:url('/static/harness/assets/monet-water-lilies.jpg') center var(--art-position,50%)/cover; filter:hue-rotate(var(--art-hue,0deg)); }
.marketplace-art::after { content:''; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb,var(--paper) 28%,transparent); }
.marketplace-art-content { width:100%; max-width:640px; text-align:center; }
.marketplace-art-caption { display:inline-block; padding:5px 10px; border-radius:var(--radius); background:color-mix(in srgb,var(--paper) 87%,transparent); font-size:var(--font-size-ui); color:var(--ink); margin-bottom:18px; }
.agent-flow { list-style:none; display:flex; align-items:center; justify-content:center; margin:0; padding:0; gap:20px; }
.agent-flow li { position:relative; min-width:0; flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px; border:1px solid color-mix(in srgb,var(--paper) 60%,var(--border)); border-radius:var(--radius); background:color-mix(in srgb,var(--paper) 91%,transparent); font-size:var(--font-size-ui); color:var(--ink); }
.agent-flow li+li::before { content:'→'; position:absolute; left:-18px; top:40%; color:var(--ink); }
.marketplace-example { background:color-mix(in srgb,var(--paper) 92%,transparent); padding:14px 18px; border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); text-align:left; font-size:var(--font-size-ui); margin:8px auto; width:fit-content; max-width:100%; }
.agent-plan-review { margin:14px 0; padding:14px; background:var(--surface); border-radius:var(--radius); }
.chat-link,.agent-list-item,.context-nav button,.settings-nav button { font-size:var(--font-size-ui); font-family:var(--font); }
.agent-list-heading strong,.chat-link { font-weight:450; }
.agent-list-summary { font-size:var(--font-size-ui); line-height:1.5; }
.agent-list-meta,.agent-status { font-size:var(--font-size-ui); }
@media(max-width:760px) { .marketplace-art { padding:16px; min-height:190px; } .agent-flow { gap:13px; } .agent-flow li { padding:12px 6px; font-size:var(--font-size-ui); } .agent-flow li+li::before { left:-13px; } .subagent-title h1 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { .activity-shimmer,.current-activity.activity-shimmer,.subchat-card small.activity-shimmer { animation:none; }.current-activity.activity-shimmer,.subchat-card small.activity-shimmer { background:none; color:var(--muted); } }
.chat-link,.agent-list-heading strong,.agent-list-summary,.context-nav button,.settings-nav button,.assistant-text,.user-text,.agent-instruction,.business-description { font-family:var(--font); font-size:var(--font-size-ui); }
.subagent-header { width:min(884px,100%); align-self:center; flex-shrink:0; padding:10px 32px 14px; margin:0; border-bottom:1px solid var(--border); }
.subagent-header p { margin:5px 0 0; font-size:var(--font-size-ui); }
.subagent-title { margin:10px 0 4px; }
.subagent-title h1 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.connection-skill { width:100%; max-width:100%; min-width:0; white-space:normal; }
.connection-skill small { overflow-wrap:anywhere; }
@media(max-width:760px) { .workspace-popover { width:min(340px,calc(100vw - 80px)); } .subagent-header { padding:8px 20px 12px; } .subagent-title h1 { font-size:17px; } }
.child-chat-title { display:flex; align-items:center; gap:9px; min-width:0; }
.child-chat-title > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.child-chat-title .return-parent { width:30px; height:30px; padding:5px; flex-shrink:0; }
.child-chat-title .delegate-icon { width:24px; height:24px; flex-basis:24px; }
.subagent-group { margin:18px 0; font-size:var(--font-size-ui); color:var(--muted); }
.subagent-group > summary { display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer; width:fit-content; padding:6px 0; }
.subagent-group > summary::-webkit-details-marker { display:none; }
.subagent-group[open] > summary > .icon { transform:rotate(90deg); }
.delegate-stack { display:flex; padding-left:5px; }
.delegate-stack .delegate-icon { margin-left:-5px; padding:2px; background:var(--paper); border-radius:var(--radius); }
.subagent-group .subchat-list { border-left:1px solid var(--border); padding-left:12px; margin-left:12px; }
.catalogue-detail-screen { width:min(760px,100%); margin:0 auto; }
.catalogue-detail-screen h1 { font-size:26px; line-height:1.3; font-weight:550; margin:25px 0 10px; }
.catalogue-detail-screen .business-description { margin:0 0 20px; }
.catalogue-detail-screen .agent-technical { margin:24px 0; }
.template-meta { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:var(--font-size-ui); color:var(--muted); }
.catalogue-detail-screen .agent-detail-section { margin:24px 0; }
.catalogue-detail-screen .agent-detail-section h3 { font-size:var(--font-size-ui); }
.agent-flow li { min-height:112px; justify-content:center; line-height:1.4; }
.agent-flow li span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
@media(max-width:760px) { .child-chat-title { gap:5px; } .child-chat-title .delegate-icon { width:20px; height:20px; flex-basis:20px; } .catalogue-detail-screen h1 { font-size:23px; } }
.completed-activity { padding:0; border:0; background:transparent; }
.completed-activity > summary { padding:4px 0; font-size:var(--font-size-ui); color:var(--muted); }
.chat-subagents { width:min(820px,100%); margin:0 auto 18px; }

/* Generated files share one scoped inventory across chats and Gallery. */
.chat-files-toggle { display:inline-flex; align-items:center; gap:7px; margin-left:auto; white-space:nowrap; color:var(--muted); }
.chat-files-toggle[aria-expanded="true"] { color:var(--ink); background:var(--surface); }
.chat-files-toggle .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.files-panel-open .workspace { padding-right:380px; }
.chat-files-panel { position:fixed; z-index:25; top:76px; bottom:0; right:0; width:380px; padding:0 20px 24px; background:var(--paper); border-left:1px solid var(--border); overflow-y:auto; overscroll-behavior:contain; }
.files-panel-heading { display:flex; align-items:center; gap:4px; position:sticky; top:0; background:var(--paper); z-index:1; padding:16px 0; }
.files-panel-heading h2 { font-size:var(--font-size-ui); font-weight:550; margin:0 auto 0 0; }
.files-panel-heading .icon-button { width:30px; height:30px; }
.files-message { font-size:var(--font-size-ui); color:var(--muted); }
.files-message:empty { display:none; }
.chat-files-list { display:grid; gap:6px; margin:8px 0 20px; }
.generated-file { display:flex; width:100%; align-items:center; gap:12px; padding:13px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); color:var(--ink); text-align:left; min-width:0; }
.generated-file:hover,.generated-file[aria-pressed="true"] { background:var(--surface); }
.generated-file > .icon { width:var(--icon-size-control); height:var(--icon-size-control); flex:0 0 var(--icon-size-control); color:var(--muted); }
.generated-file-copy { display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.generated-file-copy strong { font-size:var(--font-size-ui); font-weight:450; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.generated-file-copy small { font-size:var(--font-size-ui); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.generated-file-size { font-size:var(--font-size-ui); color:var(--muted); white-space:nowrap; }
.generated-files { display:grid; gap:12px; }
.files-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 12px; color:var(--muted); }
.files-empty > .icon { width:var(--icon-size-rail); height:var(--icon-size-rail); margin-bottom:18px; }
.files-empty strong { font-size:var(--font-size-ui); font-weight:500; color:var(--ink); }
.files-empty p { max-width:280px; font-size:var(--font-size-ui); line-height:1.6; }
.file-preview { border-top:1px solid var(--border); padding-top:20px; }
.file-preview-heading h3 { margin:0 0 7px; font-size:16px; font-weight:550; overflow-wrap:anywhere; }
.file-preview-heading p { margin:0; font-size:var(--font-size-ui); line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.file-preview-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0; }
.file-preview-actions a { text-decoration:none; }
.file-preview-content { padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); font-size:var(--font-size-ui); line-height:1.65; overflow-wrap:anywhere; overflow-x:auto; }
pre.file-preview-content { white-space:pre-wrap; font:var(--font-size-code)/1.6 var(--font-code); }
.file-preview-content h1 { font-size:22px; }.file-preview-content h2 { font-size:19px; }.file-preview-content h3 { font-size:16px; }
@media(max-width:1100px) { .chat-files-panel { box-shadow:-8px 0 30px color-mix(in srgb,var(--ink) 8%,transparent); }.files-panel-open .workspace { padding-right:0; } }
@media(max-width:760px) { .chat-files-panel { top:60px; width:calc(100vw - 56px); padding:0 16px 20px; }.chat-files-toggle span { display:none; }.chat-files-toggle { padding:8px; }.topbar .connection-info { margin-left:0; }.generated-file { gap:8px; }.generated-file-size { font-size:11px; } }

/* Upstream catalogue anatomy: icon-led rows, examples, apps, skills and information. */
.marketplace-view { position:relative; }.marketplace-search { display:flex; align-items:center; gap:9px; margin:0; width:min(300px,100%); padding:8px 13px; border:1px solid var(--border); border-radius:var(--radius-lg); }.marketplace-search input { color:var(--ink); background:transparent; border:0; min-width:0; width:100%; outline:0; font-size:var(--font-size-ui); }.marketplace-search .icon { color:var(--muted); width:var(--icon-size-control); height:var(--icon-size-control); }
.connection-category { margin-bottom:40px; }.connection-category h2 { font-size:16px; font-weight:500; margin:20px 8px; }
.connection-catalogue-item { border:0; border-radius:var(--radius-lg); min-height:82px; align-items:center; }.connection-catalogue-item .marketplace-card { padding:14px 60px 14px 10px; align-items:center; border-radius:var(--radius-lg); }.connection-catalogue-item:hover { background:var(--surface); }.connection-catalogue-item .marketplace-card > img { width:var(--icon-size-control); height:var(--icon-size-control); padding:0; border-radius:0; }.connection-catalogue-item .marketplace-card strong { font-size:var(--font-size-ui); margin:0 0 5px; font-weight:500; }.connection-catalogue-item .marketplace-card span > span { font-size:var(--font-size-ui); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.connection-catalogue-item .catalogue-add { border:0; background:transparent; width:34px; height:34px; padding:8px; top:24px; right:12px; }.connection-catalogue-item .catalogue-add .icon { width:var(--icon-size-control); height:var(--icon-size-control); }.connection-catalogue-item .catalogue-add:hover { background:color-mix(in srgb,var(--ink) 8%,var(--surface)); }.connection-added .catalogue-add { color:var(--ink); }
.connection-logo-fallback { display:inline-grid; place-items:center; flex:0 0 var(--icon-size-control); width:var(--icon-size-control); height:var(--icon-size-control); border:1px solid var(--border); border-radius:var(--radius); font-size:var(--font-size-ui); color:var(--ink); background:var(--surface); }
.connection-detail-screen { max-width:900px; padding:6px 0 40px; }.connection-breadcrumb { border:0; padding:0; color:var(--muted); background:transparent; margin-bottom:36px; }.connection-breadcrumb .icon:first-child { display:none; }.connection-breadcrumb .icon { transform:none; width:var(--icon-size-meta);  height:var(--icon-size-meta); }.connection-breadcrumb > span { color:var(--ink); }.connection-hero-logo { width:66px; height:66px; object-fit:contain; padding:0; margin-bottom:20px; border-radius:var(--radius-lg); }.connection-hero-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }.connection-hero h1 { font-size:23px; font-weight:550; margin:0 0 10px; line-height:1.3; }.connection-hero p { font-size:var(--font-size-ui); color:var(--muted); margin:0; line-height:1.5; }.connection-hero-actions { display:flex; align-items:center; flex-shrink:0; gap:10px; }.connection-hero-actions button { font-size:var(--font-size-ui); padding:8px 11px; }.connection-hero-actions .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.connection-examples { min-height:260px; padding:30px 42px; margin:0 0 28px; }.connection-example-list { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }.connection-example { display:flex; align-items:center; gap:14px; padding:12px 13px; width:fit-content; max-width:100%; text-align:left; border:0; border-radius:var(--radius-lg); color:var(--ink); background:color-mix(in srgb,var(--paper) 91%,transparent); font-size:var(--font-size-ui); line-height:1.5; }.connection-example > span { min-width:0; }.connection-example img { display:inline; width:var(--icon-size-control); height:var(--icon-size-control); object-fit:contain; vertical-align:middle; margin-right:5px; }.connection-example strong { color:var(--link,var(--accent)); font-weight:500; }.connection-example > .icon { border-radius:var(--radius-lg); width:calc(var(--icon-size-control) + 14px); height:calc(var(--icon-size-control) + 14px); padding:7px; background:var(--surface); }
.connection-long-description { font-size:var(--font-size-ui); line-height:1.65; }.connection-details-section { margin:30px 0; }.connection-details-section h2 { font-size:16px; font-weight:500; border-bottom:1px solid var(--border); padding-bottom:15px; margin-bottom:16px; }.connection-app-row { display:flex; align-items:center; gap:16px; padding:5px 8px; font-size:var(--font-size-ui); }.connection-app-row img { width:var(--icon-size-control); height:var(--icon-size-control); object-fit:contain; }.connection-app-row strong { font-weight:450; }.connection-app-row p { margin:5px 0; font-size:var(--font-size-ui); color:var(--muted); }.connection-information { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; font-size:var(--font-size-ui); }.connection-information dt { color:var(--muted); }.connection-information dd { margin:0; overflow-wrap:anywhere; }.connection-information .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }.connection-information a { color:var(--ink); }.bundled-skill { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--ink); text-decoration:none; padding:10px 8px; font-size:var(--font-size-ui); }.bundled-skill small { color:var(--muted); padding-left:30px; width:100%; }.bundled-skill:hover { background:var(--surface); }
#customize-installed .context-connection { margin-left:0; width:100%; display:flex; gap:10px; align-items:center; }#customize-installed .context-connection img { width:var(--icon-size-control); height:var(--icon-size-control); object-fit:contain; }#customize-installed .connection-logo-fallback { width:var(--icon-size-control); height:var(--icon-size-control); flex-basis:var(--icon-size-control); font-size:var(--font-size-ui); }.installed-label { color:var(--muted); font-size:var(--font-size-ui); margin:22px 10px 10px; }
.connection-setup-dialog { width:min(460px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; background:var(--surface); color:var(--ink); }.connection-setup-dialog::backdrop { background:rgba(0,0,0,.5); }#close-connection-setup { position:absolute; top:12px; right:12px; }.connection-setup-logo { width:60px; height:60px; object-fit:contain; }.connection-setup-dialog h2 { font-size:22px; font-weight:550; margin:20px 0 10px; }.connection-setup-dialog p { line-height:1.55; font-size:var(--font-size-ui); }.connection-setup-dialog a { display:inline-flex; text-decoration:none; margin-top:10px; }.connection-scope-note { color:var(--muted); }.attachment-category { padding:11px 10px 6px; font-size:var(--font-size-ui); color:var(--muted); }.attachment-connections button img { width:var(--icon-size-control); height:var(--icon-size-control); object-fit:contain; }.attachment-menu { width:280px; max-height:65dvh; overflow:visible; }.attachment-connections { max-height:230px; overflow-y:auto; }.attachment-menu button { font-size:var(--font-size-ui); }
@media(max-width:760px) { .connection-hero-row { flex-direction:column; gap:18px; }.connection-hero-actions { width:100%; justify-content:flex-end; }.connection-examples { padding:20px 14px; min-height:230px; }.connection-example { font-size:var(--font-size-ui); gap:9px; }.connection-information { grid-template-columns:100px minmax(0,1fr); }.connection-detail-screen { padding-top:0; }.connection-breadcrumb { margin-bottom:25px; }.connection-category { margin-bottom:24px; }.marketplace-search { margin-bottom:20px; }.connection-catalogue-item .marketplace-card { gap:12px; padding-right:42px; }.connection-catalogue-item .catalogue-add { right:0; }.connection-hero-actions button { font-size:var(--font-size-ui); } }

/* Codex reference surfaces, using the candidate's semantic palette. */
:root { color-scheme:light; }body,.sidebar,.topbar { background:var(--chrome,var(--surface)); }.workspace { background:var(--paper); }.topbar { border-bottom:1px solid var(--border); }.context-nav,.agent-context,.settings-nav,.chat-context-active .chat-list,.chat-context-active .sidebar-caption { background:var(--surface); }.brand img { filter:none; }.user-bubble { background:var(--user-bubble,var(--surface)); }.composer { background:var(--chrome,var(--surface)); }.assistant-text a,.file-preview-actions a { color:var(--link,var(--accent)); }.chat-files-toggle { display:none !important; }.chat-context-anchor { position:relative; margin-left:auto; }.chat-context-anchor > button { width:34px; height:34px; }.chat-context-anchor > button[aria-expanded="true"] { background:var(--surface); }.chat-context-popup { position:absolute; z-index:40; right:0; top:calc(100% + 12px); width:340px; max-height:80dvh; overflow:auto; padding:8px 20px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--chrome,var(--surface)); box-shadow:0 12px 40px rgba(0,0,0,.2); }.chat-context-popup section { padding:14px 0; }.chat-context-popup section+section { border-top:1px solid var(--border); }.chat-context-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:var(--muted); font-size:var(--font-size-ui); }.chat-context-heading .icon-button { width:22px; height:22px; }.chat-context-item { display:flex; align-items:center; gap:10px; width:100%; min-width:0; padding:8px 0; color:var(--ink); text-decoration:none; border:0; background:transparent; font-size:var(--font-size-ui); text-align:left; }.chat-context-item > span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.chat-context-item > .icon { width:var(--icon-size-control); height:var(--icon-size-control); color:var(--muted); }.chat-context-item:hover { color:var(--ink); }.chat-context-item .delegate-icon { width:20px; height:20px; flex-basis:20px; margin-right:-7px; }.chat-context-popup .subagent-group > summary { display:none; }.chat-context-popup .subagent-group { margin:5px 0; }.chat-context-popup .subchat-list { margin:0; padding:0; border:0; }.chat-context-popup .subchat-card strong { font-size:var(--font-size-ui); }
.completed-turn,.work-timing { margin:16px 0 22px; font-size:var(--font-size-ui); color:var(--muted); }.completed-turn > summary { display:flex; align-items:center; gap:6px; padding-bottom:10px; border-bottom:1px solid var(--border); list-style:none; cursor:pointer; }.completed-turn > summary::-webkit-details-marker { display:none; }.completed-turn > summary .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }.completed-turn[open] > summary .icon { transform:rotate(90deg); }.completed-turn .progress-text { margin:20px 0; color:var(--ink); font-size:var(--font-size-ui); }.work-timing { border-bottom:1px solid var(--border); padding-bottom:10px; }.assistant-commentary { font-size:var(--font-size-ui); line-height:1.7; }.message-artifacts { display:grid; gap:14px; margin-top:18px; }.artifact-card { position:relative; display:flex; align-items:center; gap:16px; padding:15px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-lg); min-width:0; }.artifact-card-main { display:flex; align-items:center; gap:14px; flex:1; min-width:0; border:0; background:transparent; padding:0; color:var(--ink); text-align:left; }.artifact-card-main > .icon { width:calc(var(--icon-size-control) + 22px); height:calc(var(--icon-size-control) + 22px); padding:11px; border-radius:var(--radius); color:var(--link,var(--accent)); background:var(--paper); }.artifact-card-main > span { min-width:0; }.artifact-card-main strong { display:block; font-size:var(--font-size-ui); font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.artifact-card-main small { font-size:var(--font-size-ui); color:var(--muted); margin-top:4px; }.artifact-type { display:block; }.artifact-open-preview { display:none; }.artifact-card-main:hover .artifact-type { display:none; }.artifact-card-main:hover .artifact-open-preview { display:block; }.artifact-open-menu { position:relative; flex-shrink:0; }.artifact-open-menu > summary { display:flex; align-items:center; gap:7px; list-style:none; cursor:pointer; font-size:var(--font-size-ui); border:1px solid var(--border); border-radius:var(--radius); padding:6px 10px; }.artifact-open-menu > summary::-webkit-details-marker { display:none; }.artifact-open-menu > summary .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); transform:rotate(90deg); }.artifact-open-actions { position:absolute; right:0; top:calc(100% + 7px); width:150px; z-index:12; padding:6px; background:var(--chrome,var(--surface)); border:1px solid var(--border); border-radius:var(--radius); }.artifact-open-actions > * { width:100%; display:flex; align-items:center; gap:8px; padding:9px; color:var(--ink); text-decoration:none; border:0; background:transparent; text-align:left; font-size:var(--font-size-ui); }.artifact-open-actions > *:hover { background:var(--surface); }.artifact-open-actions .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.files-panel-open .workspace { padding-right:min(580px,44vw); }.chat-files-panel { width:min(580px,44vw); }.chat-files-panel.file-viewer-open { padding:0; overflow:hidden; }.file-viewer-open .files-panel-heading { padding:12px 16px; border-bottom:1px solid var(--border); height:50px; }.file-viewer-open .files-panel-heading h2 { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--font-size-ui); }.file-viewer-open .file-preview { border:0; height:calc(100% - 50px); padding:0; display:flex; flex-direction:column; overflow:hidden; }.file-viewer-open .file-preview-actions { padding:12px 16px; margin:0; flex-shrink:0; gap:7px; }.file-preview-actions > * { font-size:var(--font-size-ui); padding:7px 9px; }.file-zoom { margin-left:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); color:var(--ink); min-width:65px; }.file-viewer-open .file-preview-content { width:calc(100% - 48px); min-height:calc((100vw * .44 - 48px) * 1.3); overflow:auto; margin:35px 24px; padding:40px 32px; flex:1; background:var(--document-paper,var(--ink)); color:var(--document-ink,var(--paper)); border:0; border-radius:0; transform:scale(var(--document-scale,1)); transform-origin:top center; }.file-viewer-open .file-preview-content { min-height:0; overflow:auto; }.file-viewer-open .file-preview .workspace-help { margin:24px; }.file-viewer-open .file-preview-content a { color:var(--link,var(--accent)); }
@media(max-width:1100px) { .files-panel-open .workspace { padding-right:0; }.chat-files-panel { width:min(580px,calc(100vw - 56px)); } }
@media(max-width:760px) { .chat-context-popup { width:min(330px,calc(100vw - 72px)); right:-34px; }.chat-files-panel { top:60px; width:calc(100vw - 56px); height:calc(100dvh - 60px); }.file-viewer-open .file-preview-actions { padding:10px; gap:5px; }.file-viewer-open .file-preview-content { margin:15px;width:calc(100% - 30px);padding:25px 18px; }.file-preview-actions > * { padding:6px;font-size:11px; }.artifact-card { padding:10px;gap:8px; }.artifact-card-main { gap:9px; }.artifact-card-main > .icon { width:calc(var(--icon-size-control) + 16px);height:calc(var(--icon-size-control) + 16px);padding:8px; }.artifact-open-menu > summary { padding:5px 7px;font-size:11px; }.artifact-card-main strong { font-size:var(--font-size-ui); }.artifact-card-main small { font-size:var(--font-size-ui); } }

.user-bubble { background:transparent; }.user-bubble .user-text { background:var(--user-bubble,var(--surface)); }.chat-row .chat-link { font-size:var(--font-size-ui); line-height:20px; font-weight:400; color:color-mix(in srgb,var(--ink) 75%,var(--surface)); padding:6px 10px; }.new-context-chat { font-size:var(--font-size-ui); }.chat-context-active .sidebar-caption > span,.chats-open .sidebar-caption > span { color:var(--ink); font-size:20px; font-weight:550; }.chat-list-section > h2 { font-size:var(--font-size-ui); }.chat-section-empty { font-size:var(--font-size-ui); }.context-nav > span { font-size:20px; font-weight:550; }.context-nav { padding-top:25px; }.chat-context-anchor { margin-left:auto; }.chat-context-popup { right:0; }#profile-menu .connection-details { bottom:0; top:auto; left:calc(100% + 10px); }.chat-files-panel { top:0;height:100dvh; }.file-viewer-open .files-panel-heading { height:76px; }.file-viewer-open .file-preview { height:calc(100% - 76px); }.file-page-viewport { background:var(--chrome,var(--surface));flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:24px; }.file-viewer-open .file-preview-content { flex:none;width:min(100%,calc((100dvh - 200px)/1.414));min-height:calc((100dvh - 200px));height:auto;overflow:visible;margin:0;padding:40px 32px; }.file-table { border-collapse:collapse;width:100%;font-size:var(--font-size-ui); }.file-table th,.file-table td { padding:8px 10px;border:1px solid var(--border);white-space:pre-wrap;text-align:left; }.file-table th { font-weight:600; }
@media(max-width:760px) { .chat-context-popup { right:0; }.chat-files-panel { top:0;height:100dvh; }.file-viewer-open .files-panel-heading { height:60px; }.file-viewer-open .file-preview { height:calc(100% - 60px); }.file-page-viewport { padding:16px; }.file-viewer-open .file-preview-content { width:100%;min-height:calc((100vw - 88px)*1.414);padding:24px 18px; }#profile-menu .connection-details { left:0;bottom:calc(100% + 8px); } }

.connection-hero-logo { border:1px solid var(--border); }.bundled-skill { width:100%;border:0;background:transparent;text-align:left; }#skill-content > a { display:inline-flex;text-decoration:none;gap:8px; }.file-pdf-viewport { flex:1;min-height:0; }.file-pdf-frame { width:100%;height:100%;border:0; }.catalogue-add > span { display:none; }.marketplace-item .catalogue-add { border:0;background:transparent;width:34px;height:34px;padding:8px; }.marketplace-item .catalogue-add .icon { width:var(--icon-size-control);height:var(--icon-size-control); }

.topbar .connection-breadcrumb { margin:0;font-size:var(--font-size-ui); }.connection-detail-screen { padding-top:38px; }@media(max-width:760px) { .connection-detail-screen { padding-top:16px; }.topbar .connection-breadcrumb { font-size:var(--font-size-ui); } }

/* Custom connector setup shares the connection catalogue and its dedicated builder chat. */
.custom-connector-add { flex-shrink:0; gap:8px; font-size:var(--font-size-ui); }
.custom-connector-dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:26px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--paper); color:var(--ink); }
.custom-connector-dialog::backdrop { background:color-mix(in srgb,var(--ink) 35%,transparent); }
.custom-connector-heading { display:flex; align-items:center; justify-content:space-between; }
.custom-connector-mark { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.custom-connector-mark .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.custom-connector-dialog h2 { margin:20px 0 10px; font-size:22px; font-weight:550; }
.custom-connector-dialog > form > .workspace-help { font-size:var(--font-size-ui); line-height:1.6; }
.custom-connector-dialog .agent-field > span { display:flex; align-items:baseline; gap:8px; }
.custom-connector-dialog .agent-field > span > small { color:var(--muted); font-weight:400; }
.custom-connector-dialog textarea { resize:vertical; min-height:112px; }
.custom-connector-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.custom-connector-footer button { display:inline-flex; align-items:center; gap:8px; }
.custom-connector-card .marketplace-card { width:100%; padding-right:14px; }
.custom-connector-card .marketplace-card > span { flex:1; min-width:0; }
.custom-connector-card .marketplace-card > .icon:last-child { color:var(--muted); width:var(--icon-size-meta); height:var(--icon-size-meta); }
.custom-connector-card .custom-connector-status { display:block; margin-top:5px; font-size:var(--font-size-ui); color:var(--muted); }
.custom-connector-mark.connection-hero-logo { width:66px; height:66px; }
.custom-connector-mark.connection-hero-logo .icon { width:var(--icon-size-rail); height:var(--icon-size-rail); }
.custom-credential-note { margin-top:28px; }
.custom-secret-field { display:grid; grid-template-columns:1fr auto; column-gap:16px; row-gap:9px; margin:24px 0; }
.custom-secret-field label { font-size:var(--font-size-ui); }
.custom-secret-field strong { font-weight:500; }
.custom-secret-state { color:var(--muted); font-size:var(--font-size-ui); }
.custom-secret-field > .workspace-help { grid-column:1 / -1; margin:0; }
.custom-secret-actions { grid-column:1 / -1; display:flex; gap:8px; align-items:center; }
.custom-secret-actions input { flex:1; min-width:0; width:100%; padding:11px 12px; background:var(--paper); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius); font:inherit; font-size:var(--font-size-ui); }
.custom-secret-actions button { flex-shrink:0; padding:9px 11px; font-size:var(--font-size-ui); }
.custom-secret-actions input:focus { outline:2px solid var(--link); outline-offset:2px; }
.custom-connector-download { display:inline-flex; gap:8px; align-items:center; text-decoration:none; }
.custom-connector-files { margin-top:24px; font-size:var(--font-size-ui); }
.custom-connector-files summary { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--muted); }
.custom-connector-files summary .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.custom-connector-files > div { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.custom-connector-files small { flex-shrink:0; color:var(--muted); }
@media(max-width:760px) {
  #marketplace-view > .library-heading { flex-wrap:wrap; gap:16px; }
  .custom-connector-dialog { padding:22px; }
  .custom-secret-actions { flex-wrap:wrap; }
  .custom-secret-actions input { flex-basis:100%; }
  .custom-secret-state { align-self:center; }
}

/* Credential values live only in the protected request dialog. */
.credential-request-card { display:flex; align-items:flex-start; gap:14px; padding:20px; margin:20px 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.credential-card-mark { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border-radius:var(--radius); background:var(--paper); }
.credential-card-mark .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.credential-card-copy { min-width:0; flex:1; }
.credential-card-copy strong { font-size:var(--font-size-ui); font-weight:550; }
.credential-card-copy p { font-size:var(--font-size-ui); line-height:1.5; margin:7px 0; }
.credential-card-copy small { color:var(--muted); font-size:var(--font-size-ui); }
.credential-request-card > button { flex-shrink:0; font-size:var(--font-size-ui); padding:9px 11px; }
.credential-request-card .credential-skip-reason { color:var(--muted); margin-bottom:0; }
.credential-request-dialog { width:min(510px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:28px; overflow:auto; color:var(--ink); background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); }
.credential-request-dialog::backdrop { background:color-mix(in srgb,var(--ink) 35%,transparent); }
.credential-dialog-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.credential-dialog-mark { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.credential-dialog-mark .icon { width:var(--icon-size-control); height:var(--icon-size-control); }
.credential-request-dialog h2 { margin:0 0 12px; font-size:22px; font-weight:550; line-height:1.3; }
.credential-purpose { margin:0 0 18px; color:var(--muted); font-size:var(--font-size-ui); line-height:1.6; }
.credential-provider { display:flex; align-items:center; gap:8px; font-size:var(--font-size-ui); margin-bottom:24px; }
.credential-provider .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.credential-input-label { display:block; margin:20px 0 8px; font-size:var(--font-size-ui); }
.credential-input-row { display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); }
.credential-input-row:focus-within { outline:2px solid var(--link); outline-offset:2px; }
.credential-input-row input { width:100%; min-width:0; flex:1; padding:12px; font:inherit; font-size:var(--font-size-ui); color:var(--ink); border:0; background:transparent; outline:none; }
.credential-reveal { flex-shrink:0; margin-right:5px; }
.credential-field-description { margin:8px 0 0; color:var(--muted); font-size:var(--font-size-ui); line-height:1.5; }
.credential-security { display:flex; position:relative; align-items:center; gap:7px; margin-top:20px; font-size:var(--font-size-ui); color:var(--muted); }
.credential-security-hint { width:28px; height:28px; padding:5px; }
.credential-security-hint .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.credential-security-tooltip { display:none; position:absolute; left:0; bottom:calc(100% + 7px); max-width:min(320px,100%); padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--ink); color:var(--paper); line-height:1.5; z-index:1; }
.credential-security-hint:hover ~ .credential-security-tooltip,.credential-security-hint:focus ~ .credential-security-tooltip { display:block; }
.credential-request-error { color:var(--muted); font-size:var(--font-size-ui); line-height:1.5; margin:12px 0 0; }
.credential-request-error:empty { display:none; }
.credential-request-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.credential-request-footer button { font-size:var(--font-size-ui); padding:10px 12px; }
.credential-request-form .agent-field { margin-top:20px; }
@media(max-width:760px) {
  .credential-request-dialog { padding:22px; }
  .credential-request-card { flex-wrap:wrap; padding:16px; gap:12px; }
  .credential-card-copy { flex-basis:calc(100% - 50px); }
  .credential-request-card > button { margin-left:50px; }
  .credential-request-footer { gap:8px; }
  .credential-request-footer button { padding:9px 10px; font-size:var(--font-size-ui); }
}

/* Camera setup begins with provider identification and continues in its scoped chat. */
.agent-setup-notice { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; color:var(--muted); background:var(--paper); font-size:var(--font-size-ui); line-height:1.5; }
.agent-setup-notice > .icon { flex:none; width:var(--icon-size-meta); height:var(--icon-size-meta); }
.agent-setup-notice > span { flex:1; }
.agent-setup-notice > button { flex:none; white-space:nowrap; font-size:var(--font-size-ui); padding:8px 10px; }
.agent-readiness-note { display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin:20px 0; }
.agent-readiness-note > .icon { flex:none; color:var(--muted); }
.agent-readiness-note p { flex:1; color:var(--muted); margin:0; font-size:var(--font-size-ui); line-height:1.6; }
.agent-readiness-note > button { flex:none; }
@media(max-width:600px) { .agent-setup-notice { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:start; padding:12px; } .agent-setup-notice > .icon { margin-top:2px; } .agent-setup-notice > button { grid-column:2; justify-self:start; } .agent-readiness-note { flex-wrap:wrap; } .agent-readiness-note p { flex-basis:calc(100% - 40px); } .agent-readiness-note > button { margin-left:32px; } }

.native-question-card { display:flex; align-items:flex-start; gap:14px; margin:20px 0; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.native-question-mark { display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); background:var(--paper); }
.native-question-copy { flex:1; min-width:0; }
.native-question-copy strong { display:block; font-size:var(--font-size-ui); line-height:1.5; font-weight:500; }
.native-question-copy p { font-size:var(--font-size-ui); line-height:1.5; color:var(--muted); margin:5px 0; }
.native-question-copy small { color:var(--muted); font-size:var(--font-size-ui); }
.native-question-card > button { flex:none; font-size:var(--font-size-ui); }
.native-question-dialog { width:min(570px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:28px; border:1px solid var(--border); border-radius:var(--radius-lg); color:var(--ink); background:var(--paper); }
.native-question-dialog::backdrop { background:color-mix(in srgb,var(--ink) 35%,transparent); }
.native-question-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.native-question-dialog h2 { margin:0 0 8px; font-size:22px; line-height:1.3; font-weight:550; }
.native-question-purpose { font-size:var(--font-size-ui); line-height:1.5; color:var(--muted); margin:0 0 24px; }
.native-question-field { border:0; padding:0; margin:0 0 24px; min-width:0; }
.native-question-field legend { margin-bottom:12px; padding:0; font-size:var(--font-size-ui); line-height:1.5; font-weight:500; }
.native-question-options { display:grid; gap:8px; }
.native-question-option { display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; }
.native-question-option:has(input:checked) { background:var(--surface); border-color:var(--muted); }
.native-question-option input { flex:none; accent-color:var(--ink); width:16px; height:16px; margin:0; }
.native-question-option strong { display:block; font-size:var(--font-size-ui); font-weight:500; }
.native-question-option small { display:block; font-size:var(--font-size-ui); color:var(--muted); line-height:1.5; margin-top:3px; }
.native-question-answer { display:block; margin-top:12px; }
.native-question-answer > span { display:block; font-size:var(--font-size-ui); color:var(--muted); margin-bottom:8px; }
.native-question-answer textarea { display:block; width:100%; min-height:80px; resize:vertical; padding:12px; font:inherit; font-size:var(--font-size-ui); line-height:1.5; color:var(--ink); background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); }
.native-question-error { font-size:var(--font-size-ui); color:var(--muted); line-height:1.5; }
.native-question-error:empty { display:none; }
.native-question-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
@media(max-width:600px) { .native-question-dialog { padding:22px; } .native-question-card { flex-wrap:wrap; padding:16px; gap:12px; } .native-question-card > button { margin-left:48px; } }

/* Source intake stays alongside the committed Gallery, with measured byte progress. */

.plugin-dialog-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }.plugin-installed-status { display:flex; gap:8px; align-items:center; }.connection-account-state { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:28px 0; padding:20px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }.connection-account-state p { margin:6px 0 0; }.connection-account-state button { flex-shrink:0; }.connection-hero-actions { flex-wrap:wrap; }@media(max-width:760px) { .connection-account-state { align-items:flex-start; flex-direction:column; } }

/* Scoped MCP access uses the existing settings and dialog typography. */
#mcp-content { width:min(760px,100%);margin:0 auto;padding-bottom:32px; }
.mcp-intro { line-height:1.6;margin:0 0 30px; }
.mcp-endpoint { margin-bottom:32px; }
.mcp-endpoint h2,.mcp-section-heading h2 { margin:0;font-size:16px;font-weight:550; }
.mcp-value-row { display:flex;gap:10px;margin-top:14px; }
.mcp-value-row input { flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius);padding:10px;background:var(--surface);color:var(--ink);font:inherit; }
.mcp-value-row button { flex-shrink:0; }
.mcp-section-heading { display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px; }
.mcp-connection { display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--border); }
.mcp-connection > .icon { width:var(--icon-size-control);height:var(--icon-size-control);flex-shrink:0;color:var(--muted); }
.mcp-connection-copy { flex:1;min-width:0; }
.mcp-connection-copy strong { display:block;font-weight:550;overflow-wrap:anywhere; }
.mcp-connection-copy p { margin:5px 0; }
.mcp-connection-copy small { color:var(--muted);font-size:var(--font-size-ui); }
#mcp-dialog .mcp-section-heading { align-items:flex-start; }
#mcp-dialog .mcp-section-heading button { padding:5px 8px; }
#mcp-dialog .agent-field input,#mcp-dialog .agent-field select { width:100%;min-width:0;box-sizing:border-box; }
#mcp-secret { font-family:var(--font-code); font-size:var(--font-size-code); }
.mcp-key-actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:20px; }
@media(max-width:600px) { .mcp-value-row { flex-direction:column;align-items:stretch; }.mcp-section-heading { flex-wrap:wrap; }.mcp-connection { gap:10px; }.mcp-connection > .icon { display:none; }.mcp-connection .agent-secondary { padding:8px; }.mcp-key-actions .agent-primary { flex:1; } }

/* Native provider decisions retain the exact proposed action in the parent chat. */
.native-approval-card { margin:20px 0; padding:20px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); min-width:0; }
.native-approval-heading { display:flex; align-items:center; gap:12px; }
.native-approval-copy { min-width:0; }
.native-approval-copy strong { display:block; font-size:16px; font-weight:550; overflow-wrap:anywhere; }
.native-approval-copy p { margin:4px 0 0; color:var(--muted); font-size:var(--font-size-ui); }
.native-approval-details { margin:16px 0; }
.native-approval-details > summary { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--muted); font-size:var(--font-size-ui); list-style:none; }
.native-approval-details > summary::-webkit-details-marker { display:none; }
.native-approval-details > summary .icon { width:16px; height:16px; }
.native-approval-details[open] > summary .icon:last-child { transform:rotate(90deg); }
.native-approval-arguments { display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,4fr); gap:12px 16px; max-height:320px; overflow:auto; margin:16px 0 0; padding:2px; font-size:var(--font-size-ui); }
.native-approval-arguments dt { color:var(--muted); overflow-wrap:anywhere; }
.native-approval-arguments dd { margin:0; min-width:0; }
.native-approval-arguments pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font:var(--font-size-code)/1.6 var(--font-code); }
.native-approval-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.native-approval-status { color:var(--muted); font-size:var(--font-size-ui); }
.native-approval-actions { display:flex; gap:8px; flex-shrink:0; }
.custom-access-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.custom-access-operations { display:grid; gap:10px; margin:20px 0; }
.custom-access-operations > div { display:flex; align-items:center; gap:10px; }
.custom-access-operations code { font:var(--font-size-code)/1.6 var(--font-code); overflow-wrap:anywhere; }
.custom-read-tool { display:grid; grid-template-columns:20px 1fr; column-gap:10px; margin:14px 0; }
.custom-read-tool p { grid-column:2; margin:4px 0 0; }
@media(max-width:600px) { .native-approval-card { padding:16px; } .native-approval-footer { align-items:flex-start; flex-direction:column; } .native-approval-actions { align-self:flex-end; } .native-approval-arguments { grid-template-columns:1fr; gap:5px; } .native-approval-arguments dd { margin-bottom:10px; } }
.connection-access-field { display:flex; flex-direction:column; gap:8px; margin-top:20px; font-size:var(--font-size-ui); }
.connection-access-field select { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font:inherit; }
#connection-setup-content > button { margin:8px 8px 0 0; }

.file-preview-actions a.provider-resource-action, .artifact-open-actions a.provider-resource-action { color:var(--ink); }

/* Isolated document derivatives share the split viewer and original download. */
.file-pages-viewport { flex:1; min-height:0; overflow:auto; container-type:size; overscroll-behavior:contain; }
.file-preview-page { width:min(calc(100cqw - 48px),calc((100cqh - 64px)*var(--page-ratio))); margin:24px auto; flex-shrink:0; }
.file-preview-page img { display:block; width:100%; height:auto; background:var(--document-paper); box-shadow:0 2px 12px color-mix(in srgb,var(--ink) 10%,transparent); }
.file-preview-page figcaption { text-align:center; font-size:var(--font-size-ui); color:var(--muted); padding:7px; }
.pages-actual-size .file-preview-page { width:calc(var(--page-pixel-width)*var(--document-scale,1)); max-width:none; }
@media(max-width:760px) { .file-preview-page { width:min(calc(100cqw - 24px),calc((100cqh - 48px)*var(--page-ratio))); margin:16px auto; } }


.demo-company-context { max-width:440px; margin-top:28px; }
.demo-company-context > a { display:inline-block; border-radius:4px; }
.demo-company-context img { display:block; width:132px; max-width:100%; height:auto; }
.welcome .demo-company-context p { max-width:440px; font-size:var(--font-size-ui); line-height:1.6; margin-top:12px; }
.demo-company-context + .suggestions { margin-top:18px; }

/* Gallery owns a collection toolbar and one shared full-pane file renderer. */
.workspace-file-open { display:flex; flex-direction:column; width:100%; height:100%; padding:22px; border:0; background:transparent; text-align:left; }
.workspace-file-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:500; font-size:var(--font-size-ui); line-height:1.5; padding-right:24px; }
.workspace-file-format { display:flex; align-items:center; justify-content:center; flex-direction:column; flex:1; color:var(--link,var(--ink)); gap:4px; font-size:11px; }
.workspace-file-format > .icon { width:40px; height:40px; }
.workspace-file-format[data-format="PDF"] { color:var(--accent); }
.workspace-file-format[data-format="Excel"], .workspace-file-format[data-format="CSV"] { color:var(--connection-online,var(--ink)); }
.workspace-file-footer { font-size:var(--font-size-ui); color:var(--muted); padding-right:32px; }
.workspace-file-provider,.workspace-file-select { position:absolute; right:20px; bottom:18px; width:22px; height:22px; display:grid; place-items:center; }
.workspace-file-provider .icon,.workspace-file-provider img { width:18px; height:18px; }
.workspace-file-select { opacity:0; }
.workspace-file-select input { appearance:none; width:21px; height:21px; margin:0; border:1px solid var(--border-strong,var(--muted)); border-radius:50%; background:var(--paper); cursor:pointer; }
.workspace-file-select input:checked { background:var(--ink); box-shadow:inset 0 0 0 4px var(--paper); }
.workspace-file-tile.is-selected { outline:2px solid var(--ink); outline-offset:-2px; }
.workspace-file-tile:hover .workspace-file-provider,.workspace-file-tile:focus-within .workspace-file-provider,.workspace-file-tile.is-selected .workspace-file-provider { opacity:0; }
.workspace-file-tile:hover .workspace-file-select,.workspace-file-tile:focus-within .workspace-file-select,.workspace-file-tile.is-selected .workspace-file-select { opacity:1; }
.workspace-file-menu { position:absolute; top:12px; right:12px; z-index:2; }
.workspace-file-menu > summary { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--paper); cursor:pointer; opacity:0; list-style:none; }
.workspace-file-tile:hover .workspace-file-menu > summary,.workspace-file-tile:focus-within .workspace-file-menu > summary,.workspace-file-menu[open] > summary { opacity:1; }
.workspace-file-menu-items { position:absolute; right:0; top:40px; width:210px; padding:6px; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 8px 25px color-mix(in srgb,var(--ink) 12%,transparent); }
.workspace-file-menu-items button,.workspace-file-menu-items a { display:flex; width:100%; gap:10px; align-items:center; padding:10px; border:0; background:transparent; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink); font-size:var(--font-size-ui); text-align:left; }
.workspace-file-menu-items button:hover,.workspace-file-menu-items a:hover { background:var(--surface); }
#file-selector-wrap { min-width:0; margin-right:auto; }
#file-selector { max-width:340px; border:0; color:var(--ink); background:transparent; font-size:var(--font-size-ui); padding:8px 0; }
.full-file-actions { min-width:0; }
.file-question-form { flex-shrink:0; display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); width:min(720px,calc(100% - 48px)); margin:16px auto; padding:8px 12px; }
.file-question-form input { flex:1; min-width:0; border:0; outline:none; color:var(--ink); background:transparent; font:inherit; }
#file-question-send { background:var(--ink);color:var(--paper);border-radius:50%; }
#rename-file-dialog { width:min(440px,calc(100vw - 32px)); padding:28px; }
@media(max-width:760px) {.workspace-file-open { padding:14px; }.workspace-file-title { font-size:var(--font-size-ui);padding-right:15px; }.workspace-file-format > .icon { width:30px;height:30px; }.workspace-file-footer { font-size:11px;padding-right:18px; }.workspace-file-provider,.workspace-file-select { right:10px;bottom:10px; }.workspace-file-menu { top:7px;right:7px; }.workspace-file-menu > summary { width:28px;height:28px;opacity:1; }.workspace-file-menu-items { width:180px; }#file-selector { max-width:160px; }.full-file-actions { order:3;width:100%; }.full-file-actions .file-preview-actions { justify-content:flex-end; }.file-question-form { width:calc(100% - 24px);margin:12px auto; } }
.collection-search { display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px;margin-right:auto; }
.collection-search input { min-width:0;outline:none;border:0;background:transparent;color:var(--ink);font:inherit; }
@media(max-width:760px) {.collection-search { width:100%; }.collection-search input { width:100%; }.agents-heading { flex-wrap:wrap; } }
.detail-breadcrumb { display:flex;align-items:center;gap:10px;min-width:0; }.detail-breadcrumb button { background:none;border:0;padding:0;color:var(--muted); }.detail-breadcrumb > .icon { width:16px;height:16px; }.detail-breadcrumb > span { overflow:hidden;text-overflow:ellipsis; }
.agent-collection-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px; }.agent-collection-card { display:grid;grid-template-columns:24px 1fr;text-align:left;gap:12px;border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--paper); }.agent-collection-card p,.agent-collection-card small { grid-column:2;margin:0;color:var(--muted); }.agent-collection-card small { font-size:var(--font-size-ui); }
@media(max-width:760px) {.agent-collection-grid { grid-template-columns:1fr; } }

.workspace-file-menu-items button,.workspace-file-menu-items a { justify-content:flex-start; }
.workspace-file-provider .icon,.workspace-file-provider img { width:16px;height:16px; }
@media(max-width:760px) { .agents-layout:not(.has-selection) .agent-detail { display:block; } }

.connection-token-form .credential-security { align-items:flex-start; line-height:1.5; }
.connection-token-form .credential-security > .icon { flex-shrink:0; width:var(--icon-size-meta); height:var(--icon-size-meta); margin-top:1px; }
.connection-token-form > .agent-primary { margin-top:16px; }

.artifact-audio { flex-wrap:wrap; }
.artifact-audio > audio { flex:0 0 100%; width:100%; min-width:0; height:40px; }
.file-media-viewport { display:grid; place-items:center; flex:1; min-height:0; padding:20px; overflow:auto; background:var(--surface); }
.file-media-viewport > audio { width:min(100%,520px); }
.file-media-viewport > video { width:100%; max-height:100%; object-fit:contain; background:var(--ink); }
.funding-notice { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; padding:0 4px; color:var(--muted); font-size:var(--font-size-ui); }
.funding-notice > .icon { flex-shrink:0; align-self:flex-start; margin-top:3px; }
.funding-notice > span { flex:1; }
.funding-notice > button { flex-shrink:0; padding:0; border:0; background:transparent; text-decoration:underline; text-underline-offset:3px; font-size:inherit; }
.funding-notice > button .icon { display:none; }
.usage-content > .compact-usage-section { border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin:18px 0; }
.usage-content > .compact-usage-section small { display:block; margin-top:10px; color:var(--muted); }
@media(max-width:480px){.funding-notice{display:block;line-height:1.5}.funding-notice > .icon{display:none}.funding-notice > button{margin-left:5px;display:inline}.usage-content > .compact-usage-section{padding:14px}}

.usage-title { font-size:28px; font-weight:600; margin:0 0 26px; }

.usage-stats strong.usage-stat-unknown { font-size:var(--font-size-ui); white-space:normal; overflow-wrap:anywhere; line-height:1.5; }

.business-map-surface { min-width:0; margin:16px 0; }
.business-map-dialog { width:min(1100px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:20px; color:var(--text); background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:auto; }
.business-map-dialog > .icon-button { display:flex; margin-left:auto; margin-bottom:8px; }

/* Stats owns business identity and organization activity. */
.stats-view { flex:1;min-height:0;overflow-y:auto;padding:40px 32px 64px; }
.stats-view > div,.stats-view > section { width:100%;max-width:960px;margin:0 auto; }
.stats-heading { display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px; }
.stats-heading h1 { margin:0;font-size:28px;font-weight:600;letter-spacing:-.6px; }
.stats-view .business-layout { display:block; }
.stats-view .business-panel { border:0;padding:0; }
.stats-view .business-profile-editor { margin-top:24px; }
.stats-view .business-profile-actions { display:flex;gap:8px; }
.stats-view .business-map-surface { margin-top:32px; }
#stats-activity { margin-top:48px;border-top:1px solid var(--border);padding-top:32px; }
#stats-activity > h2 { font-size:20px;font-weight:600;margin:0 0 8px; }
.stats-activity-scope { color:var(--muted);margin:0 0 24px;font-size:var(--font-size-ui); }
#stats-activity .profile-settings { padding:0;max-width:none; }
.sidebar > .founder-nav { margin-top:auto; }
.sidebar > .founder-nav:not([hidden]) + .sidebar-footer { margin-top:0; }
.scope-picker-dialog { width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:20px;color:var(--ink);background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg); }
.scope-picker-dialog::backdrop { background:color-mix(in srgb,var(--ink) 24%,transparent); }
.scope-picker-dialog > header { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px; }
.scope-picker-dialog h2 { font-size:20px;margin:0; }
.scope-picker-dialog header p { color:var(--muted);margin:6px 0 0; }
.scope-picker-dialog > input { width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit; }
.collection-control { min-width:0;max-width:100%; }
.collection-label { color:var(--muted);font-size:var(--font-size-ui); }
/* Empty landings share one centered content/composer flow over decorative artwork. */
.workspace-backdrop { position:absolute;inset:0;pointer-events:none;background-image:var(--workspace-backdrop-image);background-position:center;background-size:cover;opacity:.72;z-index:0; }
.empty-chat { --workspace-backdrop-image:url('/static/harness/assets/chat-dreamscape.png'); }
.empty-search { --workspace-backdrop-image:url('/static/harness/assets/search-dreamscape.png'); }
:is(.empty-chat,.empty-search) .workspace { --empty-content-width:700px;--empty-content-gutter:32px;position:relative;isolation:isolate;overflow-y:auto; }
:is(.empty-chat,.empty-search) :is(.conversation,.composer-area) { width:min(calc(var(--empty-content-width) + 2 * var(--empty-content-gutter)),100%);padding-inline:var(--empty-content-gutter);margin-inline:auto; }
:is(.empty-chat,.empty-search) .workspace > :not(.workspace-backdrop) { position:relative;z-index:1; }
:is(.empty-chat,.empty-search) .conversation { flex:0 0 auto;overflow:visible;margin-top:auto;padding-top:40px;padding-bottom:0; }
:is(.empty-chat,.empty-search) .welcome { margin:0 auto 28px;text-align:center; }
:is(.empty-chat,.empty-search) .welcome-icon { width:38px;height:38px;margin:0 auto 16px; }
:is(.empty-chat,.empty-search) .welcome h1 { font-size:30px;line-height:1.2; }
:is(.empty-chat,.empty-search) .welcome p { margin-left:auto;margin-right:auto; }
:is(.empty-chat,.empty-search) .suggestions { width:100%;max-width:none;margin-inline:auto; }
:is(.empty-chat,.empty-search) .composer-area { margin-top:0;margin-bottom:auto;padding-bottom:40px; }
:is(.empty-chat,.empty-search) .composer { background:var(--paper); }
:is(.empty-chat,.empty-search) .demo-company-context { margin-left:auto;margin-right:auto; }
:is(.empty-chat,.empty-search) .demo-company-context img { margin-left:auto;margin-right:auto; }
.workspace-empty-state { min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 20px;color:var(--muted); }
.workspace-empty-state > .icon { width:32px;height:32px; }
.workspace-empty-state h2 { margin:0;color:var(--ink);font-size:20px;font-weight:500; }
.workspace-empty-state p { margin:0;max-width:380px; }
.workspace-empty-actions { display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:8px; }
.agents-layout:not(.has-selection) .agent-detail { padding-left:0;border-left:0; }
.files-empty { align-items:center;text-align:center;justify-content:center; }
@media(max-width:760px) {
 .stats-view { padding:24px 16px 40px; }
 .stats-heading { flex-wrap:wrap;gap:8px; }
 .stats-heading h1 { font-size:26px; }
 :is(.empty-chat,.empty-search) .workspace { --empty-content-gutter:12px; }
 :is(.empty-chat,.empty-search) .conversation { padding-top:28px; }
 :is(.empty-chat,.empty-search) .welcome { margin-bottom:22px; }
 :is(.empty-chat,.empty-search) .welcome h1 { font-size:28px; }
 :is(.empty-chat,.empty-search) .composer-area { padding-bottom:28px; }
}

/* The chat list follows one compact row rhythm. */
.chats-caption .new-context-chat > .icon { width:16px; height:16px; }
.chat-context-active .topbar { min-height:48px; height:48px; }

/* Agent conversations share the chat canvas; information is a focused modal. */
.agent-chat-meta { color:var(--muted); font-size:12px; white-space:nowrap; margin-left:auto; }
.agent-collection-item { position:relative; min-width:0; }
.agent-collection-item > .agent-collection-card { width:100%; height:100%; padding-right:48px; }
.agent-card-info { position:absolute; top:12px; right:12px; opacity:0; }
.agent-collection-item:hover .agent-card-info,.agent-collection-item:focus-within .agent-card-info { opacity:1; }
.agent-conversation-card { display:flex; align-items:center; gap:12px; width:100%; margin:12px 0; padding:16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--paper); color:var(--ink); text-align:left; }
.agent-conversation-card > span { flex:1; min-width:0; }
.agent-conversation-card strong { display:block; font-weight:500; }
.agent-conversation-card small { display:block; margin-top:3px; color:var(--muted); }
#agent-info-dialog { inset:0; margin:auto; width:min(640px,calc(100vw - 32px)); height:auto; max-height:calc(100dvh - 48px); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 18px 60px color-mix(in srgb,var(--ink) 16%,transparent); }
#agent-info-dialog[open] { display:flex; flex-direction:column; }
#agent-info-dialog .agent-detail { padding:0; border:0; }
#agent-info-dialog .agent-editor-header { align-items:center; padding:20px 24px; }
#agent-info-dialog .agent-editor-header h2 { margin:0; font-size:18px; }
@media(hover:none) { .agent-card-info { opacity:1; } }
@media(max-width:760px) { .agent-chat-meta { max-width:110px; overflow:hidden; text-overflow:ellipsis; } #agent-info-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); } }

.agent-frequency-units { display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.agent-frequency-units button { flex:1; min-width:0; border:0; border-radius:var(--radius-sm); padding:7px 8px; font-size:var(--font-size-ui); background:transparent; color:var(--muted); }
.agent-frequency-units button[aria-pressed="true"] { background:var(--paper); color:var(--ink); box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 10%,transparent); }

@media(max-width:760px) { .agent-conversation-active .agent-chat-meta { display:none; } }

.chat-completion-dot { width:8px; height:8px; flex-shrink:0; margin-left:auto; border-radius:50%; background:var(--status-info); }

.chat-question-dot { width:8px; height:8px; flex-shrink:0; margin-left:auto; border-radius:50%; background:var(--status-attention); }


.message-channel-status { display:flex; align-items:center; gap:8px; color:var(--muted); margin:12px 0; font-size:var(--font-size-ui); }.message-channel-status .icon { width:16px;height:16px; }

/* Control room Home */
#workspace-tab-view { flex: 1; min-height: 0; overflow: auto; }
.cr-shell { width: min(1180px, 100%); margin: 0 auto; padding: 34px 42px 70px; color: var(--ink); }
.cr-page-heading, .cr-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.cr-page-heading h1, .cr-detail-heading h1 { margin: 3px 0 8px; font-size: clamp(29px, 3.2vw, 43px); letter-spacing: -1.5px; font-weight: 500; }
.cr-page-heading p, .cr-detail-heading p { margin: 0; color: var(--muted); }
.cr-kicker { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cr-heading-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.cr-primary-button, .cr-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 9px 14px; border-radius: var(--radius); font-size: var(--font-size-ui); white-space: nowrap; }
.cr-primary-button { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.cr-secondary-button { border: 1px solid var(--border); background: var(--paper); color: var(--ink); }
.cr-primary-button:hover, .cr-secondary-button:hover { border-color: var(--muted); }
.cr-text-button { border: 0; background: transparent; color: var(--muted); padding: 3px 0; font-size: var(--font-size-ui); }
.cr-text-button:hover { color: var(--ink); }
.cr-location-card { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); min-height: 245px; overflow: hidden; margin-bottom: 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cr-location-heading { padding: 28px; }
.cr-location-heading h2 { margin: 7px 0 7px; font-size: 24px; font-weight: 500; letter-spacing: -.6px; }
.cr-location-heading p { color: var(--muted); font-size: var(--font-size-ui); margin: 0 0 20px; }
.cr-location-slot { display: grid; place-items: center; min-height: 245px; background: color-mix(in srgb, var(--surface) 78%, var(--paper)); border-left: 1px solid var(--border); }
.cr-location-slot-copy { display: grid; gap: 6px; max-width: 260px; padding: 28px; text-align: center; color: var(--muted); font-size: 12px; }
.cr-location-slot-copy strong { color: var(--ink); font-size: 14px; font-weight: 500; }
.cr-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.cr-agent-section, .cr-recents { min-width: 0; }
.cr-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.cr-section-heading h2 { margin: 4px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -.3px; }
.cr-agent-list { display: grid; gap: 8px; }
.cr-agent-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); }
.cr-agent-card-main { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px; border: 0; border-radius: inherit; background: transparent; text-align: left; }
.cr-agent-card-main:hover { background: var(--surface); }
.cr-agent-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font-size: 20px; }
.cr-agent-card-copy { display: grid; min-width: 0; gap: 3px; flex: 1; }
.cr-agent-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-ui); font-weight: 500; }
.cr-agent-card-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.cr-agent-card-copy small { color: var(--muted); font-size: 10px; }
.cr-chevron { color: var(--muted); font-size: 21px; }
.cr-empty-card { display: grid; gap: 6px; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); font-size: 12px; }
.cr-empty-card strong { color: var(--ink); font-size: var(--font-size-ui); font-weight: 500; }
.cr-empty-card .cr-secondary-button { width: fit-content; margin-top: 7px; }
.cr-recents { margin-top: 34px; }
.cr-recent-list { border-top: 1px solid var(--border); }
.cr-recent-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cr-recent-main { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.cr-recent-main > span:last-child { display: grid; gap: 2px; min-width: 0; }
.cr-recent-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-ui); font-weight: 500; }
.cr-recent-main small { color: var(--muted); font-size: 11px; }
.cr-recent-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--accent); }
.cr-promote-button { border: 0; background: transparent; color: var(--muted); font-size: 11px; white-space: nowrap; }
.cr-promote-button:hover { color: var(--ink); }
.cr-recent-empty { padding: 15px 0; color: var(--muted); font-size: 12px; }
.cr-error { margin: 22px 0 0; color: var(--muted); font-size: 12px; }
.cr-back-button { border: 0; background: transparent; color: var(--muted); padding: 0; margin-bottom: 26px; font-size: var(--font-size-ui); }
.cr-back-button:hover { color: var(--ink); }
.cr-agent-pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper); text-align: left; }
.cr-agent-pill:hover { border-color: var(--muted); }
.cr-agent-pill > span:nth-child(2) { display: grid; gap: 2px; }
.cr-agent-pill strong { font-size: 11px; font-weight: 500; }
.cr-agent-pill small { color: var(--muted); font-size: 10px; }
.cr-agent-pill > span:last-child { color: var(--muted); font-size: 17px; }
.cr-agent-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cr-detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); gap: 28px; align-items: start; }
.cr-summary-card { min-height: 300px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cr-rich-summary { white-space: pre-wrap; max-width: 700px; margin: 17px 0 24px; font-size: 18px; line-height: 1.65; }
.cr-recommendation { margin: 0 0 22px; padding: 15px; border-left: 2px solid var(--accent); background: var(--paper); }
.cr-recommendation p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.cr-incidents { min-width: 0; }
.cr-count { color: var(--muted); font-size: 11px; }
.cr-incident { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 11px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.cr-incident-media { overflow: hidden; width: 106px; height: 67px; border-radius: var(--radius); background: var(--surface); }
.cr-incident-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-incident-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-size: 10px; }
.cr-incident > div:last-child { display: grid; gap: 5px; min-width: 0; }
.cr-incident strong { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; font-weight: 500; }
.cr-incident small { color: var(--muted); font-size: 10px; }
.cr-icon-button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); font-size: 22px; }
@media (max-width: 800px) { .cr-shell { padding: 24px 22px 55px; } .cr-page-heading, .cr-detail-heading { display: grid; gap: 18px; } .cr-heading-actions { justify-content: flex-start; } .cr-location-card, .cr-section-grid, .cr-detail-grid { grid-template-columns: 1fr; } .cr-location-slot { border-top: 1px solid var(--border); border-left: 0; } .cr-location-heading { padding: 22px; } }
@media (max-width: 520px) { .cr-shell { padding: 19px 15px 42px; } .cr-page-heading h1, .cr-detail-heading h1 { font-size: 30px; } .cr-heading-actions { display: grid; grid-template-columns: 1fr 1fr; } .cr-heading-actions > button { width: 100%; white-space: normal; } .cr-agent-card-copy span { white-space: normal; } .cr-recent-row { align-items: flex-start; } .cr-promote-button { white-space: normal; text-align: right; } .cr-summary-card { padding: 20px; } .cr-rich-summary { font-size: 16px; } }
.cr-location-model { display: block; margin-top: -14px; margin-bottom: 18px; color: var(--muted); font-size: 10px; }
.cr-location-frame { display: block; width: 100%; height: 100%; min-height: 245px; border: 0; }

/* The location overview is the Home surface. It keeps the viewer in the app shell at a useful reading height. */
.cr-kicker { display: none; }
.cr-location-view { margin: 0 0 34px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cr-location-view .cr-location-slot { display: block; height: min(820px, calc(100dvh - 132px)); min-height: 620px; border: 0; background: var(--surface); }
.cr-location-view .cr-location-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; }
.cr-location-view .cr-location-slot-copy { min-height: 620px; place-content: center; margin: auto; }
@media (max-width: 800px) {
  .cr-location-view .cr-location-slot { height: min(920px, calc(100dvh - 98px)); min-height: 680px; }
  .cr-location-view .cr-location-slot-copy { min-height: 680px; }
}

/* The location viewer is already inside the product shell. Embedded mode keeps the
   live review surface inside the available frame instead of repeating its chrome. */
.embedded-viewer #locationRoot { height: 100%; min-height: 100%; overflow: visible; }
.embedded-viewer main { height: 100%; min-height: 100%; padding: 0; }
.embedded-viewer .compact-session { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
.embedded-viewer .compact-session-body { height: calc(100% - 61px); max-height: none; overflow: auto; }
.embedded-viewer .compact-session .workspace { height: 100%; }
@media (max-width: 900px) {
  .embedded-viewer #locationRoot { height: auto; min-height: 100%; }
  .embedded-viewer .compact-session { height: auto; min-height: 100%; }
  .embedded-viewer .compact-session-body { height: auto; min-height: calc(100dvh - 61px); }
  .embedded-viewer .compact-session .workspace { height: auto; }
}

/* Home fills the workspace: the location view is the page. */
.cr-shell.cr-home { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100%; margin: 0; padding: 0; }
.cr-home .cr-location-view { flex: 1; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.cr-home .cr-location-view .cr-location-slot { height: 100%; min-height: 0; }
.cr-home .cr-location-view .cr-location-slot-copy { min-height: 0; height: 100%; }

/* Home location identity lives on its image header. */
.cr-home-actions{justify-content:flex-end;margin-bottom:16px;gap:0}
@media(max-width:800px){.cr-home-actions{display:flex}.cr-home-actions .cr-heading-actions{display:flex;flex-wrap:nowrap}.cr-home-actions .cr-heading-actions>button{width:auto;white-space:nowrap}}

/* The conversation list: four sections (Organization, Action, Tracker, Recent) and one row grammar: icon, title, state. */
.chat-context-active .sidebar-caption, .chats-open .sidebar-caption { height:72px; padding:0 12px 0 20px; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; font-family:var(--font); }
.chat-context-active .sidebar-caption > span, .chats-open .sidebar-caption > span { font-size:18px; font-weight:550; line-height:24px; letter-spacing:0; }
.chats-caption .new-context-chat { gap:8px; padding:8px 10px; color:color-mix(in srgb,var(--ink) 75%,var(--surface)); white-space:nowrap; }
.chats-caption .new-context-chat:hover { color:var(--ink); }
.chat-context-active .chat-list, .chats-open .chat-list { top:72px; padding:4px 12px 32px; font-family:var(--font); scrollbar-width:thin; }
@media (max-width: 760px) { .chats-open .sidebar-caption { z-index:1; } }
.chat-list-section + .chat-list-section { margin-top:24px; }
.chat-list-section > h2 { margin:0 0 4px; font-size:var(--font-size-ui); font-weight:400; letter-spacing:0; text-transform:none; }
.chat-section-toggle { gap:6px; min-height:32px; padding:0 8px; border-radius:var(--radius); color:var(--muted); font:500 var(--font-size-ui)/20px var(--font); letter-spacing:0; text-transform:none; }
.chat-section-toggle:hover { color:var(--ink); }
.chat-section-toggle .icon { width:14px; height:14px; opacity:.7; transition:transform .16s ease; }
.chat-section-contents { display:grid; gap:2px; }
.chat-section-contents[hidden] { display:none; }
.chat-row .chat-link { gap:12px; min-height:36px; padding:8px; margin:0; font:400 var(--font-size-ui)/20px var(--font); letter-spacing:0; color:color-mix(in srgb,var(--ink) 82%,var(--surface)); }
.chat-row .chat-link[aria-current="page"] { color:var(--ink); }
.chat-row .chat-link > .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); color:var(--muted); }
.chat-row .chat-link > .chat-row-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-row .chat-link > .chat-row-state { flex-shrink:0; margin-left:auto; color:var(--muted); font:400 12px/20px var(--font); letter-spacing:0; }
.chat-row-new .chat-link { color:var(--muted); }
.chat-row-new .chat-link:hover { color:var(--ink); }
.chat-row-actions { right:4px; top:4px; bottom:4px; }
.chat-row-actions .icon-button { width:28px; height:28px; }
.chat-row-actions .icon { width:var(--icon-size-meta); height:var(--icon-size-meta); }
.chat-section-empty { margin:0; padding:8px; font:400 var(--font-size-ui)/20px var(--font); color:var(--muted); }
.chat-list button:focus-visible { outline-offset:-2px; }
@media (prefers-reduced-motion: reduce) { .chat-section-toggle .icon { transition:none; } }

.workspace-metadata { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 9px 12px; font-size:var(--font-size-ui); margin: 23px 0 0; }
.workspace-metadata dt { color: var(--muted); }
.workspace-metadata dd { margin: 0; overflow-wrap: anywhere; }

.usage-dialog .dialog-header, .connection-editor .dialog-header, .skill-dialog .dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; }
.dialog-header p { color: var(--muted); font-size:var(--font-size-ui); line-height: 1.5; margin: 0; }

.workspace-file-search { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:var(--radius-lg); padding:9px 12px; order:-2; }
.workspace-file-search input { width:210px; min-width:0; border:0; outline:none; background:transparent; color:var(--ink); font:inherit; }
.workspace-file-search:focus-within { outline:2px solid var(--border-strong,var(--muted)); outline-offset:2px; }
.workspace-file-viewer #library-view { visibility:hidden; }
.workspace-file-viewer #chat-files-panel { left:72px; right:0; width:auto; top:0; height:100dvh; border-left:0; display:flex; flex-direction:column; }
.workspace-file-viewer .files-panel-heading { display:flex; flex-shrink:0; gap:12px; }
.workspace-file-viewer .full-file-actions .file-preview-actions { padding:0; margin:0; flex-wrap:nowrap; }
.workspace-file-viewer .file-preview-actions button, .workspace-file-viewer .file-preview-actions a { font-size:0; width:36px; height:36px; justify-content:center; padding:7px; }
.workspace-file-viewer #file-preview { flex:1; min-height:0; height:auto; }
.workspace-file-viewer .file-page-viewport { min-height:0; }
.workspace-file-viewer .file-preview-content { width:min(780px,calc(100% - 48px)); min-height:800px; }
@media(max-width:760px) {.workspace-file-search { width:100%; } }
@media(max-width:760px) {.workspace-file-search input { flex:1; } }
@media(max-width:760px) {.workspace-file-viewer #chat-files-panel { left:56px; } }
@media(max-width:760px) {.workspace-file-viewer .files-panel-heading { gap:5px;padding:10px;flex-wrap:wrap;height:auto;min-height:60px; } }
@media(max-width:760px) {.workspace-file-viewer .file-preview-content { width:100%;min-height:500px; } }
.workspace-file-viewer .file-preview-actions a.provider-resource-action { font-size:var(--font-size-ui);width:auto; }
@media(max-width:760px){.workspace-file-viewer .full-file-actions .file-preview-actions { flex-wrap:wrap; }}