* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: flex; overflow: hidden; color: var(--ink); background: var(--paper); font: 15px/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: 20px; height: 20px; 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: 12px; 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: 12px; }
.agents-nav:not(.library-nav) { margin-bottom: 4px; }
.library-nav { margin-bottom: 4px; }
.agents-nav.cameras-nav { margin-bottom: 22px; }
.library-shortcut { margin-left: auto; flex-shrink: 0; color: var(--muted); }
.library-shortcut .icon { width: 16px; height: 16px; }
.library-shortcut + .connection-info { margin-left: 0; }
.library-shortcut[aria-pressed="true"] { color: var(--ink); }
.sidebar-caption { font-size: 12px; 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: 15px; height: 15px; }
.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: 17px; height: 17px; 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: 14px; height: 14px; }
.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: 13px; color: var(--muted); }
.corpus-details { border-top: 1px solid var(--border); padding: 16px 10px; margin-top: 16px; font-size: 12px; }
.corpus-details summary { display: flex; gap: 9px; align-items: center; cursor: pointer; }
.corpus-details summary .icon { width: 17px; height: 17px; }
#corpus-list { max-height: 170px; overflow: auto; }
.corpus-row { margin-top: 12px; color: var(--muted); overflow-wrap: anywhere; }
.corpus-row strong { display: block; color: var(--ink); font-weight: 500; }
.sidebar-footer { display: flex; gap: 10px; align-items: center; padding: 12px 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.sidebar-footer span:not(.avatar) { display: block; color: var(--muted); font-size: 11px; }
.sidebar-footer #workspace-owner { color: var(--ink); font-size: 13px; }
.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: 12px; }
.workspace { display: flex; flex-direction: column; min-width: 0; flex: 1; height: 100dvh; }
.topbar { min-height: 76px; padding: 0 32px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.chat-title { font-size: 15px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.connection-status { margin-left: auto; white-space: nowrap; color: var(--muted); font-size: 12px; }
.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: 12px; }
.connection-details strong { display: block; color: var(--ink); font-size: 14px; 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: 12px; 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; }
.evidence-grid.home-search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.search-status { color: var(--muted); font-size: 14px; 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: 13px; }
.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: 15px; }
.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: 14px; }
.suggestions button:hover { color: var(--accent); }
.suggestions .icon { width: 15px; height: 15px; color: var(--muted); }
.messages { max-width: 820px; margin: 0 auto; }
.chat-continuation { max-width: 820px; margin: 0 auto 20px; font-size: 12px; }
.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: 13px; height: 13px; }
.message { margin: 12px 0 32px; }
.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: 13px; font-weight: 600; margin-bottom: 12px; }
.assistant-label .icon { width: 16px; height: 16px; }
.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: inherit; }
.markdown-content code { font: inherit; font-size: .9em; 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: 6px; margin-bottom: 14px; }
.tool-group { margin: 14px 0; padding: 10px 13px; color: var(--muted); font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tool-group + .assistant-text { margin-top: 18px; }
.tool-group > summary { cursor: pointer; padding: 6px 0; }
.tool-group > .tool-list { margin-top: 8px; }
.tool-call { border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; color: var(--muted); }
.tool-call summary { cursor: pointer; padding: 9px 12px; }
.tool-call summary small { font-size: 10px; margin-left: 8px; color: var(--muted); }
.tool-call pre { padding: 0 12px 10px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.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: 13px; font-weight: 500; }
.subchat-card small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.subchat-card .icon { width: 17px; height: 17px; }
.working { margin: 12px 0; color: var(--muted); font-size: 13px; }
.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; } }
.evidence-heading { font-size: 12px; font-weight: 500; color: var(--muted); margin: 18px 0 9px; }
.evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.evidence-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); }
.evidence-media { position: relative; }
.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: 18px; height: 18px; }
.evidence-media:hover .thumbnail-download, .evidence-media:focus-within .thumbnail-download { opacity: 1; pointer-events: auto; }
.thumbnail-download:hover { background: var(--paper); }
.evidence-preview { padding: 0; border: 0; background: var(--surface); display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.evidence-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-icon { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 42px; height: 42px; color: var(--paper); background: color-mix(in srgb, var(--ink) 76%, transparent); border-radius: var(--radius); }
.evidence-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.evidence-info { padding: 10px 12px; }
.evidence-camera { display: block; font-size: 12px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.evidence-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; color: var(--muted); font-size: 11px; }
.evidence-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evidence-meta a { color: inherit; white-space: nowrap; }
.retry-button { background: var(--surface); border: 1px solid var(--border); padding: 7px 12px; border-radius: var(--radius); margin-top: 12px; font-size: 13px; }
.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: 14px; }
.session-form label { display: block; font-size: 12px; 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: 14px; font-weight: 500; }
.source-choice small { color: var(--muted); font-size: 11px; }
.session-form #session-message { min-height: 22px; font-size: 12px; }
.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: 12px; }
.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: 16px; height: 16px; }
.workspace-toggle .workspace-chevron { transform: rotate(90deg); width: 12px; height: 12px; }
.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: 13px; 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: 13px; font-weight: 500; }
.workspace-option small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.workspace-option .icon { width: 17px; height: 17px; color: var(--muted); }
.workspace-empty { padding: 15px 10px; font-size: 12px; 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: 10px 12px; background: var(--surface); font-size: 12px; max-height: 170px; overflow: auto; }
.queue-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; color: var(--muted); margin-bottom: 6px; }
.queued-message { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.queued-message span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queued-message .icon-button { margin-left: auto; width: 28px; height: 28px; flex-shrink: 0; }
.queued-message .icon { width: 15px; height: 15px; }
.queued-message .steer-button { flex-shrink: 0; margin-left: auto; }
.queued-message .steer-button + .icon-button { margin-left: 0; }
.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: 13px; height: 13px; }
.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: 12px; }
.text-button:hover { color: var(--accent); }
.evidence-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.clip-dialog { width: min(1240px, calc(100vw - 64px)); max-width: initial; max-height: calc(100dvh - 64px); padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: auto; box-shadow: 0 16px 70px color-mix(in srgb, var(--ink) 20%, transparent); }
.clip-dialog::backdrop { background: color-mix(in srgb, var(--ink) 50%, transparent); }
.clip-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; }
.clip-dialog h2 { font-size: 16px; margin: 0; font-weight: 550; }
.clip-dialog-header p { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.clip-dialog-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.clip-player-area { min-width: 0; padding: 0 0 12px 20px; }
#clip-player { display: block; width: 100%; max-height: 68dvh; aspect-ratio: 16 / 9; background: var(--ink); }
.clip-stage { position: relative; overflow: hidden; }
.clip-stage.focus-active #clip-player { filter: grayscale(1) brightness(.58); }
#focus-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.clip-stage:fullscreen { display: grid; place-items: center; width: 100%; height: 100%; background: var(--ink); }
.clip-stage:fullscreen #clip-player { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.focus-controls { display: flex; align-items: center; gap: 12px; padding: 12px 0 0; }
.focus-toggle { display: flex; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; flex-shrink: 0; }
.focus-toggle button { border: 0; padding: 4px 10px; border-radius: var(--radius-sm); background: transparent; font-size: 11px; }
.focus-toggle button[aria-pressed="true"] { background: var(--surface); }
#focus-status { font-size: 10px; color: var(--muted); }
.clip-player-controls { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; }
.clip-player-controls .icon { width: 17px; height: 17px; }
.clip-player-controls .previous-icon { transform: rotate(180deg); }
#clip-position { color: var(--muted); font-size: 12px; }
#fullscreen-clip { margin-left: auto; }
.clip-observations { padding: 0 22px 22px; max-height: 66dvh; overflow-y: auto; }
.clip-observations section + section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.clip-observations h3 { font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.clip-download-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 22px; }
.clip-download-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 9px; border-radius: var(--radius); font-size: 11px; text-decoration: none; white-space: nowrap; }
.clip-download-actions .icon { width: 16px; height: 16px; }
.clip-download-primary { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); flex: 1; }
.clip-download-manifest { color: var(--ink); background: var(--paper); border: 1px solid var(--border); }
.clip-download-actions a:hover { opacity: .8; }
.clip-source-details { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 7px 8px; margin: 0; font-size: 11px; line-height: 1.5; }
.clip-source-details dt { color: var(--muted); }
.clip-source-details dd { margin: 0; overflow-wrap: anywhere; }
.source-reference { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 11px; text-underline-offset: 3px; }
.clip-identifiers { margin-top: 12px; font-size: 11px; color: var(--muted); }
.clip-identifiers summary { cursor: pointer; }
.clip-identifiers dl { margin-top: 10px; color: var(--ink); }
#clip-connections > summary { cursor: pointer; font-size: 12px; font-weight: 600; }
#clip-connection-count { font-weight: 400; color: var(--muted); margin-left: 5px; }
.clip-relation-list { margin-top: 14px; }
.clip-relation { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.clip-relation + .clip-relation { margin-top: 8px; }
.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: 13px; height: 13px; 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); }
.clip-structure { display: flex; flex-direction: column; gap: 14px; }
.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: 13px; 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; }
.model-observation + .model-observation { margin-top: 18px; }
.clip-interval-note { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 12px 0 0; }
#clip-show-library { display: block; width: fit-content; }
.observation-explanation { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
.inspection-question { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; margin-bottom: 16px; }
.inspection-question > summary { font-size: 11px; font-weight: 600; cursor: pointer; }
.inspection-question p { font-size: 12px; margin: 8px 0 0; white-space: pre-wrap; }
.inspection-model-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.inspection-model-heading strong { font-size: 12px; font-weight: 600; }
.inspection-current { font-size: 10px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); }
.inspection-time, .inspection-input-summary { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.inspection-provenance { margin: 8px 0 14px; font-size: 10px; color: var(--muted); }
.inspection-provenance summary { cursor: pointer; }
.inspection-provenance dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 8px; margin: 10px 0 0; }
.inspection-provenance dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.inspection-output-label { display: block; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.inspection-raw-output { white-space: pre-wrap; font-size: 12px; }
.inspection-history, .inspection-other-questions { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 20px; }
.inspection-history > summary, .inspection-other-questions > summary { font-size: 11px; color: var(--muted); cursor: pointer; }
.inspection-history > .model-observation, .inspection-other-questions > .inspection-question-group { margin-top: 18px; }
.inspection-other-questions > .inspection-question-group + .inspection-question-group { border-top: 1px solid var(--border); padding-top: 18px; }
.gallery-dialog { width: min(1260px, calc(100vw - 48px)); max-width: initial; max-height: calc(100dvh - 48px); padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.gallery-dialog::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.gallery-dialog h2 { font-size: 16px; font-weight: 550; margin: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 22px 24px; }
.gallery-more { display: flex; margin: 0 auto 20px; padding: 10px 18px; }
.gallery-button { display: flex; justify-content: center; width: 100%; align-items: center; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; }
.gallery-button:hover { border-color: var(--muted); }
.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: 12px; 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-view { flex: 1; min-height: 0; overflow: auto; padding: 22px 40px 40px; }
.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: 14px; color: var(--muted); }
.library-search { display: flex; gap: 10px; max-width: 1240px; margin: 0 auto 20px; }
.library-search input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 13px; outline-color: var(--accent); }
.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; }
.library-search-caption { color: var(--muted); font-size: 12px; margin: 10px 0 22px; }
.library-search-results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cameras-view { flex: 1; overflow: auto; min-height: 0; padding: 24px 40px 40px; }
.camera-layout { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 32px; }
.camera-list { display: flex; flex-direction: column; gap: 5px; }
.camera-link { display: flex; align-items: center; gap: 12px; background: transparent; border: 0; padding: 12px; text-align: left; border-radius: var(--radius); }
.camera-link:hover, .camera-link[aria-current="true"] { background: var(--surface); }
.camera-link img { width: 66px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); }
.camera-link span { min-width: 0; }
.camera-link strong, .camera-link small { display: block; overflow-wrap: anywhere; }
.camera-link strong { font-size: 12px; font-weight: 500; }
.camera-link small { margin-top: 5px; font-size: 10px; color: var(--muted); }
.camera-detail { min-width: 0; border-left: 1px solid var(--border); padding-left: 32px; }
.camera-detail h2 { font-size: 24px; font-weight: 500; margin: 0 0 10px; overflow-wrap: anywhere; }
.camera-detail h3 { font-size: 14px; font-weight: 600; margin: 26px 0 12px; }
.camera-description, .camera-help { color: var(--muted); font-size: 12px; line-height: 1.65; }
.camera-reference { max-width: 640px; }
.camera-reference .evidence-info { padding: 10px; }
.camera-reference .evidence-card { max-width: 100%; }
.camera-context { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin: 16px 0; }
.camera-context p { font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.camera-context h3 { margin: 0 0 12px; }
.camera-context ul { padding-left: 18px; font-size: 13px; }
.camera-context-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.camera-context-form .agent-field { margin-top: 14px; }
.camera-context-form .agent-primary { margin-top: 18px; }
.camera-source-link { display: block; padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: 12px; overflow-wrap: anywhere; }
.camera-source-link small { display: block; color: var(--muted); margin-top: 4px; }
.camera-history { margin-top: 20px; font-size: 12px; color: var(--muted); }
.camera-detail > .camera-back { display: none; }
.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: 13px; }
.library-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; max-width: 1240px; margin: 0 auto 16px; color: var(--muted); }
.library-breadcrumbs > .icon { width: 12px; height: 12px; }
.library-breadcrumbs .text-button:first-child { padding-left: 0; }
.library-message { max-width: 1240px; margin: 0 auto 20px; color: var(--muted); font-size: 13px; }
.library-message .source-choices { max-width: 750px; }
.library-layout { max-width: 1240px; margin: 0 auto; }
.library-layout.has-asset { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 30px; align-items: start; }
.library-files { min-width: 0; }
.library-file-heading, .library-file { display: grid; grid-template-columns: minmax(0, 1fr) 75px 80px; gap: 12px; align-items: center; padding: 12px; width: 100%; text-align: left; }
.library-file-heading { font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); padding-top: 0; }
.library-file { border: 0; border-bottom: 1px solid var(--border); background: var(--paper); }
.library-file:hover, .library-file[aria-current="true"] { background: var(--surface); }
.library-file-name { min-width: 0; display: flex; align-items: center; gap: 12px; }
.library-file-name > .icon { width: 19px; height: 19px; color: var(--muted); }
.library-file-name > span { min-width: 0; }
.library-file strong { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-file small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.library-file-duration, .library-file-size { color: var(--muted); font-size: 12px; white-space: nowrap; }
.library-more { margin-top: 14px; }
.library-empty { padding: 18px 12px; font-size: 13px; color: var(--muted); }
.library-asset { min-width: 0; border-left: 1px solid var(--border); padding-left: 25px; }
.library-asset h2 { font-size: 20px; line-height: 1.4; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.library-asset-label { font-size: 12px; margin: 5px 0 16px; color: var(--muted); }
.library-asset-thumbnail { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface); border-radius: var(--radius); margin-bottom: 16px; }
.library-download { text-decoration: none; }
.library-source-metadata { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 9px 12px; font-size: 12px; margin: 23px 0 0; }
.library-source-metadata dt { color: var(--muted); }
.library-source-metadata dd { margin: 0; overflow-wrap: anywhere; }
.library-source-provenance { margin-top: 18px; font-size: 11px; color: var(--muted); }
.library-source-provenance summary { cursor: pointer; }
.library-source-provenance p { white-space: pre-wrap; line-height: 1.6; }
.library-interval-heading { display: flex; gap: 8px; align-items: center; margin-top: 28px; }
.library-interval-heading h3 { margin: 0; font-size: 13px; font-weight: 600; }
.library-interval-heading span { color: var(--muted); font-size: 11px; }
.library-interval-note { color: var(--muted); font-size: 11px; margin: 7px 0 14px; }
.library-intervals { gap: 8px; }
.library-intervals .evidence-info { padding: 8px; }
.library-intervals .evidence-meta { display: block; }
.library-asset > .library-back { display: none; }
@media (max-width: 1120px) {
  .library-layout.has-asset { display: block; }
  .library-layout.has-asset .library-files { display: none; }
  .library-asset { border: 0; padding-left: 0; }
  .library-asset > .library-back { display: inline-flex; border: 0; padding-left: 0; margin-bottom: 20px; }
  .library-back .icon { transform: rotate(180deg); }
  .library-asset-thumbnail { max-width: 520px; }
  .library-intervals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.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: 14px; }
.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: 13px; 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: 17px; height: 17px; }
.agents-message { max-width: 1160px; margin: 0 auto 24px; font-size: 14px; 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: 36px; height: 36px; 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: 14px; 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: 12px; 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: 14px; }
.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: 12px; 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: 13px; font-weight: 600; margin: 0 0 10px; }
.agent-instruction { margin: 0; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-settings { margin: 26px 0 0; font-size: 13px; }
.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: 12px; 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: 13px; }
.agent-output .icon { width: 18px; height: 18px; color: var(--muted); margin-top: 1px; }
.agent-output strong { font-weight: 500; }
.agent-output p { font-size: 12px; 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: 12px; }
.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: 13px; }
.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: 13px; height: 13px; }
.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: 12px; 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: 12px; 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: 12px; 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: 13px; }
.agent-field textarea { resize: vertical; min-height: 105px; }
.agent-field small, .agent-field-help { font-size: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px; }
@media (max-width: 960px) {
  .camera-layout { display: block; }
  .camera-layout.has-selection .camera-list { display: none; }
  .camera-layout:not(.has-selection) .camera-detail { display: none; }
  .camera-detail { border-left: 0; padding-left: 0; }
  .camera-detail > .camera-back { display: inline-flex; margin-bottom: 20px; }
  .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; }
.clip-selection { position: absolute; top: 9px; left: 9px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.clip-selection input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.evidence-card.clip-selected { border-color: var(--ink); }
.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: 12px; }
.attachment-menu button:hover { background: var(--surface); }
.clip-attachment-previews, .user-clip-attachments { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0; }
.clip-attachment-previews { max-height: 140px; overflow-y: auto; }
.clip-attachment-chip { display: flex; align-items: center; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.clip-attachment-chip > button:first-child { display: flex; gap: 7px; align-items: center; padding: 9px; min-width: 0; border: 0; background: transparent; font-size: 11px; }
.clip-attachment-chip > button:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-attachment-chip .icon { width: 14px; height: 14px; flex-shrink: 0; }
.clip-attachment-chip > .icon-button { width: 28px; height: 28px; flex-shrink: 0; }
.clip-picker { width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); }
.clip-picker[open] { display: flex; flex-direction: column; }
.clip-picker::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.clip-picker .gallery-header { display: flex; align-items: start; justify-content: space-between; padding: 22px 24px 16px; gap: 14px; }
.clip-picker h2 { font-size: 21px; font-weight: 500; margin: 0 0 5px; }
.clip-picker .gallery-header p { margin: 0; color: var(--muted); font-size: 12px; }
.clip-picker .library-search { margin: 0 24px 12px; max-width: unset; flex-shrink: 0; }
#clip-picker-message, #clip-picker-breadcrumbs { margin: 0 24px 10px; }
.clip-picker-content { padding: 0 24px 20px; flex: 1; min-height: 100px; overflow-y: auto; }
.clip-picker-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding: 16px 24px; font-size: 12px; color: var(--muted); flex-shrink: 0; }
.picker-file { display: flex; width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 13px 4px; text-align: left; overflow-wrap: anywhere; }
.picker-file small { margin-left: auto; color: var(--muted); font-size: 11px; flex-shrink: 0; }
.evidence-grid.picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[hidden] { display: none !important; }
@media (min-width: 1400px) { .sidebar { width: 272px; } .topbar { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 760px) {
  .evidence-grid.picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clip-picker .gallery-header { padding: 18px 14px 14px; }
  .clip-picker .library-search { margin-left: 14px; margin-right: 14px; }
  #clip-picker-message, #clip-picker-breadcrumbs { margin-left: 14px; margin-right: 14px; }
  .clip-picker-content { padding-left: 14px; padding-right: 14px; }
  .clip-picker-footer { padding: 14px; }
  .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; }
  .evidence-grid.home-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-search-grid .evidence-info { padding: 8px; }
  .home-search-grid .evidence-meta { display: block; }
  .conversation { padding: 12px 20px 22px; }
  .library-view { padding: 18px 20px 32px; }
  .cameras-view { padding: 18px 20px 32px; }
  .library-heading { flex-wrap: wrap; gap: 16px; }
  .library-heading h1 { font-size: 26px; }
  .library-heading p { font-size: 13px; }
  .library-collection select { max-width: 100%; }
  .library-file-heading, .library-file { grid-template-columns: minmax(0, 1fr) 54px; gap: 8px; padding-left: 0; padding-right: 0; }
  .library-file-heading > :last-child, .library-file-size { display: none; }
  .library-file-name { gap: 9px; }
  .library-file strong { font-size: 12px; }
  .library-file small, .library-file-duration { font-size: 10px; }
  .library-intervals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .library-search-results .evidence-info { padding: 8px; }
  .library-search-results .evidence-meta { display: block; }
  .library-shortcut { font-size: 11px; padding-left: 4px; padding-right: 4px; }
  .library-shortcut .icon { width: 14px; height: 14px; }
  .agents-view { padding: 18px 20px 32px; }
  .agents-heading { gap: 12px; margin-bottom: 26px; }
  .agents-heading h1 { font-size: 26px; }
  .agents-heading p { font-size: 13px; }
  .agents-heading > .agent-primary { padding: 9px 10px; font-size: 12px; }
  .agents-heading > .agent-primary .icon { width: 14px; height: 14px; }
  .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: 14px; }
  .suggestions { margin-top: 25px; }
  .suggestions button { font-size: 13px; }
  .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; }
  .evidence-grid { gap: 8px; }
  .user-text { max-width: 94%; }
  .notice { width: calc(100% - 24px); }
  .clip-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 36px); }
  .clip-dialog-header { padding: 14px; }
  .clip-dialog-body { display: block; }
  .clip-player-area { padding: 0 12px 8px; }
  .clip-observations { padding: 12px 16px 20px; max-height: 40dvh; }
  .clip-dialog h2 { font-size: 14px; }
  .gallery-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 32px); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 10px 16px; }
  .gallery-grid .evidence-info { padding: 8px; }
  .gallery-grid .evidence-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@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: 20px; height: 20px; 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: 12px; 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-name { padding: 10px 11px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.profile-menu > button { width: 100%; text-align: left; display: block; padding: 10px 11px; border: 0; background: transparent; border-radius: var(--radius); font-size: 12px; }
.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: 102px; padding: 24px 16px 10px; 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: 8px 9px; text-align: left; color: var(--ink); font-size: 12px; 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: 102px; 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: 12px; 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: 13px; height: 13px; }
.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: 14px; 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: 12px; 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: 12px; 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: 13px; margin: 24px 0 12px; }
.business-panel h2:not(:first-child) { margin-top: 34px; }
.business-description, .business-facts { font-size: 13px; 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: 12px; }
.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: 12px; }
.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 .gallery-header, .connection-editor .gallery-header, .skill-dialog .gallery-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; }
.usage-dialog h2, .connection-editor h2, .skill-dialog h2 { margin: 0 0 6px; font-size: 21px; font-weight: 500; }
.gallery-header p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.usage-content, .connection-editor-body, .skill-content { padding: 0 24px 26px; }
.usage-content h3, .skill-content h3 { font-size: 13px; 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: 12px; }
.usage-plan-details { font-size: 12px; 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-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: 13px; 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: 9px; margin-bottom: 24px; }
.marketplace-filters select { min-width: 140px; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 12px; }
.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: 0 42px; }
.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: 40px; height: 40px; object-fit: contain; padding: 3px; 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: 14px; font-weight: 500; margin: 2px 0 7px; }
.marketplace-card span > span { font-size: 12px; 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: 13px; 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: 13px; }
.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: 13px; 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: 13px; }
  .business-view, .marketplace-view, .library-view, .cameras-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: 15px; }
  .marketplace-grid { grid-template-columns: 1fr; }
  .marketplace-tabs { gap: 10px; }
  .marketplace-tabs button { font-size: 11px; }
  .marketplace-filters select { min-width: 0; max-width: calc(50% - 5px); flex: 1; font-size: 11px; }
  .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: 12px; flex-shrink: 0; }
.usage-content .library-source-metadata { grid-template-columns: minmax(140px, 1fr) minmax(0, 1.2fr); }

.skills-menu-parent { position: relative; }
.skills-menu-parent > button { width: 100%; }
.skills-menu-parent > button .icon:last-child { margin-left: auto; width: 13px; }
.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: 22px; height: 22px; padding: 3px; 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; } }

.gallery-view-toggle { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); width: fit-content; margin: 0 0 18px; background: var(--surface); }
.gallery-view-toggle button { border: 0; border-radius: var(--radius); background: transparent; padding: 6px 12px; font-size: 11px; color: var(--muted); }
.gallery-view-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent); }
.clip-dialog-header .gallery-view-toggle { margin: 0 0 0 auto; }
.clip-picker > .gallery-view-toggle { margin-left: 22px; }
.library-file-thumbnail { width: 54px; height: 36px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.gallery-grid-view .library-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; align-content: start; }
.gallery-grid-view .library-file-heading { display: none; }
.gallery-grid-view .library-files > :not(.library-file) { grid-column: 1 / -1; }
.gallery-grid-view .library-file { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 1px solid var(--border); padding: 12px; border-radius: var(--radius); }
.gallery-grid-view .library-file-name { grid-column: 1 / -1; display: block; }
.gallery-grid-view .library-file-name > .icon { display: block; height: 72px; width: 40px; margin: 8px auto 16px; }
.gallery-grid-view .library-file-thumbnail { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 10px; }
.gallery-grid-view .library-file-size { text-align: right; display: block; }
.gallery-list-view #library-message .source-choices { grid-template-columns: 1fr; }
.gallery-list-view .library-search-results, .gallery-list-view .library-intervals, .gallery-list-view .gallery-grid, .gallery-list-view .picker-grid { grid-template-columns: 1fr; }
.gallery-list-view :is(.library-search-results, .library-intervals, .gallery-grid, .picker-grid) .evidence-card { display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr); align-items: center; }
.gallery-list-view .gallery-grid .evidence-card { grid-template-columns: 160px minmax(0, 1fr); }
.gallery-list-view .evidence-card .evidence-meta { flex-wrap: wrap; }
.tool-output-label { margin: 10px 0 4px; font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .gallery-grid-view .library-files { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .gallery-grid-view .library-file { padding: 8px; } .gallery-grid-view .library-file-duration, .gallery-grid-view .library-file-size { font-size: 9px; } .gallery-list-view :is(.library-search-results, .library-intervals, .gallery-grid, .picker-grid) .evidence-card { grid-template-columns: 110px minmax(0, 1fr); } .clip-dialog-header .gallery-view-toggle button { padding: 5px 8px; } }

.chat-section-toggle { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 400; }
.chat-section-toggle .icon { width: 10px; height: 10px; transform: rotate(90deg); }
.chat-section-toggle[aria-expanded="false"] .icon { transform: none; }
.at-icon { font-size: 23px; line-height: 1; font-weight: 400; }
.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: 12px; }
.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; } }

.sidebar > #marketplace-nav > .at-icon { display: inline; }

.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: 14px; 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: 12px; 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: 15px; height: 15px; color: var(--muted); }
.customize-context-active .workspace, .gallery-context-active .workspace { padding-left: 248px; }
.marketplace-item { display: flex; position: relative; align-items: start; border-bottom: 1px solid var(--border); }
.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: 11px; height: 11px; }
.catalogue-add:hover { color: var(--ink); background: var(--surface); }
@media (max-width: 760px) { .customize-context-active .workspace, .gallery-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('/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: 12px; }
.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: 12px; 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: 14px; height: 14px; }
#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: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.command-option strong { display: block; font-size: 12px; 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: 13px; height: 13px; }
.agent-list-summary { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.agent-outcome { font-size: 15px; line-height: 1.6; }
.agent-frequency { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin: 22px 0; }
.agent-frequency .icon { width: 16px; height: 16px; }
.agent-technical { margin: 25px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; }
.agent-technical > summary { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.agent-technical > summary .icon { width: 14px; height: 14px; }
.agent-technical .agent-instruction { font-size: 12px; 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-watch-list { padding-left: 20px; font-size: 13px; line-height: 1.7; }
.settings-nav button, .profile-menu > button, #customize-context button, .home-mode-switch button, [data-gallery-view] { display: flex; align-items: center; gap: 8px; }
.settings-nav button .icon, .profile-menu > button .icon, #customize-context button .icon, .home-mode-switch button .icon, [data-gallery-view] .icon { width: 14px; height: 14px; 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:12px; 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:12px; 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:14px; }
.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:14px; }
.activity-row { display:flex; align-items:flex-start; gap:9px; line-height:1.5; }
.activity-row .icon { width:17px; height:17px; margin-top:2px; flex:0 0 17px; }
.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; }
.activity-row.activity-shimmer > span,.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 ease-in-out infinite; }
@keyframes activity-glisten { 0%,100% { opacity:.68; } 50% { opacity:1; } }
@keyframes activity-glisten-text { from { background-position:100% 0; } to { background-position:-100% 0; } }
.tool-call summary { align-items:center; gap:8px; }
.tool-call summary .icon { width:15px; height:15px; }
.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:12px; }
.command-back .icon { transform:rotate(180deg); width:14px; }
.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('/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:12px; 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:13px; 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:14px; margin:8px auto; width:fit-content; max-width:100%; }
.watch-criterion { margin:14px 0; }
.watch-criterion strong { font-size:14px; font-weight:550; }
.watch-criterion p { margin:5px 0; }
.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:14px; font-family:var(--font); }
.agent-list-heading strong,.chat-link { font-weight:450; }
.agent-list-summary { font-size:14px; line-height:1.5; }
.agent-list-meta,.agent-status { font-size:12px; }
@media(max-width:760px) { .marketplace-art { padding:16px; min-height:190px; } .agent-flow { gap:13px; } .agent-flow li { padding:12px 6px; font-size:12px; } .agent-flow li+li::before { left:-13px; } .subagent-title h1 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { .activity-shimmer,.activity-row.activity-shimmer > span,.subchat-card small.activity-shimmer { animation:none; } }
.camera-review-dialog { width:min(480px,calc(100vw - 32px)); max-height:80vh; padding:24px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--paper); color:var(--ink); }
.camera-review-options { display:grid; gap:8px; margin:18px 0; max-height:45vh; overflow:auto; }
.camera-review-options label { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--border); border-radius:var(--radius); }
.camera-review-options input { accent-color:var(--accent); }
.review-cameras { float:right; margin-bottom:12px; }
#clip-room .text-button { display:flex; align-items:center; gap:6px; margin-top:8px; }
.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:15px; }
.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:12px; }
.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:13px; 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:13px; color:var(--muted); }
.catalogue-detail-screen .agent-detail-section { margin:24px 0; }
.catalogue-detail-screen .agent-detail-section h3 { font-size:15px; }
.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:13px; 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:18px; height:18px; }
.gallery-tabs { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.gallery-tabs button { display:flex; align-items:center; gap:8px; background:transparent; color:var(--muted); border:0; border-radius:var(--radius); padding:9px 12px; font-size:15px; }
.gallery-tabs button[aria-pressed="true"],.gallery-tabs button:hover { background:var(--surface); color:var(--ink); }
.gallery-tabs .icon { width:18px; height:18px; }
.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:15px; font-weight:550; margin:0 auto 0 0; }
.files-panel-heading .icon-button { width:30px; height:30px; }
.files-message { font-size:13px; 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:24px; height:24px; flex:0 0 24px; color:var(--muted); }
.generated-file-copy { display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.generated-file-copy strong { font-size:15px; font-weight:450; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.generated-file-copy small { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.generated-file-size { font-size:12px; color:var(--muted); white-space:nowrap; }
.generated-files { display:grid; gap:12px; }
.gallery-grid-view .generated-files { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.gallery-grid-view .generated-files .generated-file { flex-wrap:wrap; align-items:flex-start; padding:20px; gap:14px; }
.gallery-grid-view .generated-files .generated-file > .icon { height:50px; width:100%; flex-basis:100%; margin:16px 0; }
.gallery-grid-view .generated-files .generated-file-copy { flex-basis:100%; }
.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:34px; height:34px; margin-bottom:18px; }
.files-empty strong { font-size:15px; font-weight:500; color:var(--ink); }
.files-empty p { max-width:280px; font-size:13px; 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:12px; 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:13px; line-height:1.65; overflow-wrap:anywhere; overflow-x:auto; }
pre.file-preview-content { white-space:pre-wrap; font-family:ui-monospace,monospace; }
.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; }.gallery-grid-view .generated-files { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.gallery-grid-view .generated-files .generated-file { padding:12px; }.gallery-tabs { margin-bottom:14px; }.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 auto 30px; width:min(340px,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:14px; }.marketplace-search .icon { color:var(--muted); width:18px; height:18px; }
.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:42px; height:42px; padding:0; border-radius:var(--radius); }.connection-catalogue-item .marketplace-card strong { font-size:15px; margin:0 0 5px; font-weight:500; }.connection-catalogue-item .marketplace-card span > span { font-size:14px; 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:22px; height:22px; }.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 42px; width:42px; height:42px; border:1px solid var(--border); border-radius:var(--radius); font-size:24px; 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:14px; }.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:15px; 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:13px; padding:8px 11px; }.connection-hero-actions .icon { width:16px; height:16px; }
.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:15px; line-height:1.5; }.connection-example > span { min-width:0; }.connection-example img { display:inline; width:16px; height:16px; 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:30px; height:30px; padding:7px; background:var(--surface); }
.connection-long-description { font-size:15px; 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:15px; }.connection-app-row img { width:36px; height:36px; object-fit:contain; }.connection-app-row strong { font-weight:450; }.connection-app-row p { margin:5px 0; font-size:13px; color:var(--muted); }.connection-information { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; font-size:14px; }.connection-information dt { color:var(--muted); }.connection-information dd { margin:0; overflow-wrap:anywhere; }.connection-information .icon { width:16px; height:16px; }.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:14px; }.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:18px; height:18px; object-fit:contain; }#customize-installed .connection-logo-fallback { width:18px; height:18px; flex-basis:18px; font-size:12px; }.installed-label { color:var(--muted); font-size:13px; 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:14px; }.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:12px; color:var(--muted); }.attachment-connections button img { width:19px; height:19px; 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:14px; }
@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:13px; 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:12px; } }

/* Codex reference surfaces, using the candidate's semantic palette. */
:root { color-scheme:dark; }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:invert(1); }.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:13px; }.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:14px; text-align:left; }.chat-context-item > span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.chat-context-item > .icon { width:19px; height:19px; 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:13px; }
.completed-turn,.work-timing { margin:16px 0 22px; font-size:14px; 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:14px; height:14px; }.completed-turn[open] > summary .icon { transform:rotate(90deg); }.completed-turn .progress-text { margin:20px 0; color:var(--ink); font-size:15px; }.work-timing { border-bottom:1px solid var(--border); padding-bottom:10px; }.assistant-commentary { font-size:15px; 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:44px; height:44px; 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:15px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.artifact-card-main small { font-size:14px; 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:13px; 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:13px; height:13px; 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:13px; }.artifact-open-actions > *:hover { background:var(--surface); }.artifact-open-actions .icon { width:16px; height:16px; }
.files-panel-open .workspace,.clip-viewer-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:14px; }.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:12px; 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 .camera-help { margin:24px; }.file-viewer-open .file-preview-content a { color:var(--user-bubble,var(--accent)); }
#clip-dialog[open] { position:fixed; top:76px; right:0; bottom:0; left:auto; width:min(580px,44vw); height:calc(100dvh - 76px); max-height:none; max-width:none; margin:0; border:0; border-left:1px solid var(--border); border-radius:0; background:var(--paper); box-shadow:none; padding:0; overflow:hidden; }#clip-dialog .clip-dialog-header { border-bottom:1px solid var(--border); }#clip-dialog .clip-dialog-layout { display:flex; flex-direction:column; height:calc(100% - 60px); }#clip-dialog .clip-main { display:flex; flex-direction:column; flex:1; min-height:0; }#clip-dialog .clip-stage { flex:1; min-height:180px; max-height:55dvh; background:var(--paper); }#clip-dialog #clip-player { width:100%; height:100%; object-fit:contain; }#clip-dialog .clip-observations { max-height:32dvh; overflow:auto; border-left:0; border-top:1px solid var(--border); padding:20px; }#clip-dialog .clip-actions { flex-wrap:wrap; }#clip-dialog .clip-interpretation { display:none; }
@media(max-width:1100px) { .files-panel-open .workspace,.clip-viewer-open .workspace { padding-right:0; }.chat-files-panel,#clip-dialog[open] { width:min(580px,calc(100vw - 56px)); } }
@media(max-width:760px) { .chat-context-popup { width:min(330px,calc(100vw - 72px)); right:-34px; }.chat-files-panel,#clip-dialog[open] { 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:34px;height:34px;padding:8px; }.artifact-open-menu > summary { padding:5px 7px;font-size:11px; }.artifact-card-main strong { font-size:14px; }.artifact-card-main small { font-size:12px; } }

#clip-dialog .clip-dialog-body { position:relative;display:flex;flex-direction:column;height:calc(100% - 66px);min-height:0; }#clip-dialog .clip-player-area { display:flex;flex-direction:column;flex:1;min-height:0;padding:20px 18px 58px; }#clip-dialog .clip-stage { flex:1; min-height:160px; max-height:none; aspect-ratio:auto; display:flex; align-items:center; justify-content:center; }#clip-dialog #clip-player { max-height:100%;object-fit:contain; }#clip-dialog .clip-interval-note { display:none; }#clip-dialog .focus-controls { padding-top:8px; }#clip-dialog .clip-player-controls { flex-wrap:wrap; }#clip-dialog .clip-metadata-drawer { position:absolute;bottom:0;left:0;right:0;max-height:52%;overflow:auto;z-index:3;border-top:1px solid var(--border);background:var(--surface); }#clip-dialog .clip-metadata-drawer > summary { display:flex;align-items:center;gap:10px;list-style:none;padding:13px 18px;cursor:pointer;font-size:14px;background:var(--surface);position:sticky;top:0;z-index:2; }#clip-dialog .clip-metadata-drawer > summary::-webkit-details-marker { display:none; }#clip-dialog .clip-metadata-drawer > summary .icon:last-child { margin-left:auto;transform:rotate(-90deg);width:15px; }#clip-dialog .clip-metadata-drawer[open] > summary .icon:last-child { transform:rotate(90deg); }#clip-dialog .clip-observations { max-height:none;overflow:visible;border:0;padding:5px 18px 20px; }#clip-dialog .clip-dialog-header h2 { font-size:15px; }#clip-dialog .clip-dialog-header { padding:14px 18px; }#clip-dialog .clip-dialog-meta { font-size:12px; }

.user-bubble { background:transparent; }.user-bubble .user-text { background:var(--user-bubble,var(--surface)); }.chat-row .chat-link { font-size:15px; padding:9px 10px; }.new-context-chat { font-size:15px; }.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:13px; }.chat-section-empty { font-size:12px; }.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-info { margin:10px 0 0; border-top:1px solid var(--border); }#profile-menu .connection-details { bottom:0; top:auto; left:calc(100% + 10px); }.chat-files-panel,#clip-dialog[open] { top:0;height:100dvh; }.file-viewer-open .files-panel-heading { height:76px; }.file-viewer-open .file-preview { height:calc(100% - 76px); }.file-page-viewport { 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:12px; }.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; }#clip-dialog .clip-dialog-header { min-height:76px; }#clip-dialog .clip-dialog-body { height:calc(100% - 76px); }
@media(max-width:760px) { .chat-context-popup { right:0; }.chat-files-panel,#clip-dialog[open] { 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; }#clip-dialog .clip-dialog-header { min-height:60px; }#clip-dialog .clip-dialog-body { height:calc(100% - 60px); }#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:20px;height:20px; }

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