Something went wrong. Try again.
I'm going to build my own OpenClaw, with blackjack... and bun!
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053/* * workspace.css - Extracted from styles.css during the layered stylesheet split. * Ownership: Workspace sidebar, tree, preview, and pane-adjacent workspace chrome. * Keep selector names/order stable in this first move-only tranche. */
.workspace-sidebar { --workspace-header-font-size: 13px; --workspace-header-button-size: 28px; --workspace-header-icon-size: 16px; --workspace-header-icon-refresh-size: 18px; --workspace-tree-font-size: 12px; --workspace-count-font-size: 10px; --workspace-row-height: 22px; --workspace-row-gap: 2px; --workspace-caret-box-size: 14px; --workspace-caret-icon-size: 8px; --workspace-file-icon-size: 14px; --workspace-folder-icon-size: 16px; --workspace-folder-upload-icon-size: 13px; --workspace-rename-input-height: 20px; --workspace-rename-input-line-height: 18px; display: none; flex-direction: column; width: var(--sidebar-width, 280px); min-width: var(--sidebar-width, 280px); background-color: var(--bg-primary); height: var(--app-height, 100dvh); overflow: hidden; opacity: 1; transform: translateX(0); transition: width var(--ui-transition-fast), min-width var(--ui-transition-fast), opacity var(--ui-transition-fast), transform var(--ui-transition-fast);}
.workspace-sidebar[data-workspace-scale="compact"] { --workspace-header-font-size: 12px; --workspace-header-button-size: 26px; --workspace-header-icon-size: 15px; --workspace-header-icon-refresh-size: 17px; --workspace-tree-font-size: 11px; --workspace-count-font-size: 10px; --workspace-row-height: 20px; --workspace-row-gap: 2px; --workspace-caret-box-size: 13px; --workspace-caret-icon-size: 7px; --workspace-file-icon-size: 13px; --workspace-folder-icon-size: 15px; --workspace-folder-upload-icon-size: 12px; --workspace-rename-input-height: 18px; --workspace-rename-input-line-height: 16px;}
.workspace-sidebar[data-workspace-scale="default"] { --workspace-header-font-size: 13px; --workspace-header-button-size: 28px; --workspace-header-icon-size: 16px; --workspace-header-icon-refresh-size: 18px; --workspace-tree-font-size: 12px; --workspace-count-font-size: 10px; --workspace-row-height: 22px; --workspace-row-gap: 2px; --workspace-caret-box-size: 14px; --workspace-caret-icon-size: 8px; --workspace-file-icon-size: 14px; --workspace-folder-icon-size: 16px; --workspace-folder-upload-icon-size: 13px; --workspace-rename-input-height: 20px; --workspace-rename-input-line-height: 18px;}
.workspace-sidebar[data-workspace-scale="comfortable"] { --workspace-header-font-size: 14px; --workspace-header-button-size: 32px; --workspace-header-icon-size: 18px; --workspace-header-icon-refresh-size: 20px; --workspace-tree-font-size: 13px; --workspace-count-font-size: 11px; --workspace-row-height: 28px; --workspace-row-gap: 4px; --workspace-caret-box-size: 16px; --workspace-caret-icon-size: 9px; --workspace-file-icon-size: 16px; --workspace-folder-icon-size: 18px; --workspace-folder-upload-icon-size: 15px; --workspace-rename-input-height: 24px; --workspace-rename-input-line-height: 20px;}
.workspace-toggle-tab { display: none; position: fixed; top: 50%; transform: translateY(-50%); z-index: 9; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 0; width: var(--workspace-tab-width, 20px); height: 52px; border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: var(--shadow-sm); cursor: pointer; align-items: center; justify-content: center; transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);}
.workspace-toggle-tab:hover { color: var(--text-primary); border-color: var(--accent-color);}
.workspace-toggle-tab-icon { width: 12px; height: 12px; flex-shrink: 0; transition: transform var(--ui-transition-fast);}
.workspace-toggle-tab.open .workspace-toggle-tab-icon { transform: rotate(180deg);}
.workspace-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-color); font-weight: 600; font-size: var(--workspace-header-font-size);}
.workspace-header-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0;}
.workspace-header-actions { display: inline-flex; align-items: center; gap: 6px;}
.workspace-index-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px var(--spacing-md); border-bottom: 1px solid var(--border-color); font-size: 11px; line-height: 1.3;}
.workspace-index-status-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-secondary);}
.workspace-index-status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--text-muted); flex: 0 0 auto;}
.workspace-index-status-chip.state-ready .workspace-index-status-dot { background: var(--success-color, #1f9d55);}
.workspace-index-status-chip.state-indexing .workspace-index-status-dot { background: var(--accent-color);}
.workspace-index-status-chip.state-stale .workspace-index-status-dot { background: var(--warning-color, #d97706);}
.workspace-index-status-chip.state-failed .workspace-index-status-dot { background: var(--danger-color, #dc2626);}
.workspace-index-status-chip.state-never_indexed .workspace-index-status-dot { background: var(--text-muted);}
.workspace-refresh,.workspace-reindex,.workspace-download,.workspace-edit,.workspace-delete,.workspace-create,.workspace-toggle-hidden,.workspace-menu-button { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--workspace-tree-font-size); padding: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: var(--workspace-header-button-size); height: var(--workspace-header-button-size); box-sizing: border-box; transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);}
.workspace-refresh svg,.workspace-reindex svg,.workspace-download svg,.workspace-edit svg,.workspace-delete svg,.workspace-create svg,.workspace-toggle-hidden svg,.workspace-menu-button svg { width: var(--workspace-header-icon-size); height: var(--workspace-header-icon-size); display: block; overflow: visible;}
.workspace-refresh svg { width: var(--workspace-header-icon-refresh-size); height: var(--workspace-header-icon-refresh-size);}
.workspace-refresh:hover,.workspace-reindex:hover,.workspace-download:hover,.workspace-edit:hover,.workspace-delete:hover,.workspace-create:hover,.workspace-toggle-hidden:hover,.workspace-menu-button:hover { color: var(--text-primary); border-color: var(--accent-color);}
.workspace-reindex.active,.workspace-toggle-hidden.active,.workspace-menu-button.active { color: var(--accent-color); border-color: var(--accent-color);}
.workspace-menu-wrap { position: relative; display: inline-flex;}
.workspace-menu-dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; max-width: min(320px, 90vw); max-height: min(420px, calc(100dvh - 88px)); overflow-y: auto; overscroll-behavior: contain; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px; z-index: 80; display: flex; flex-direction: column; gap: 4px;}
.workspace-menu-item { appearance: none; border: 1px solid transparent; background: transparent; color: var(--text-primary); font-size: 13px; line-height: 1.35; text-align: left; border-radius: var(--radius-sm); padding: 8px 10px; min-height: 36px; cursor: pointer; transition: background-color var(--ui-transition-fast), border-color var(--ui-transition-fast), color var(--ui-transition-fast);}
.workspace-menu-item:hover { background: var(--bg-secondary); border-color: var(--border-color);}
.workspace-menu-item:disabled { opacity: 0.45; cursor: not-allowed;}
.workspace-menu-item.active { color: var(--accent-color); font-weight: 600;}
.workspace-menu-item.danger { color: var(--danger-color, #d9534f);}
.workspace-menu-separator { height: 1px; margin: 2px 4px; background: var(--border-color);}
.workspace-download:disabled,.workspace-edit:disabled,.workspace-delete:disabled,.workspace-create:disabled,.workspace-menu-button:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--border-color); color: var(--text-secondary);}
.workspace-tree { flex: 1; overflow: auto; padding: 4px;}
.workspace-drop-active .workspace-tree { box-shadow: inset 0 0 0 1px var(--accent-color);}
.workspace-drop-hint { font-size: var(--workspace-tree-font-size); color: var(--text-secondary); padding: var(--spacing-xs) var(--spacing-sm); margin: 2px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px dashed var(--border-color);}
.workspace-upload-strip { font-size: var(--workspace-tree-font-size); color: var(--text-secondary); padding: 4px var(--spacing-sm); background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-shrink: 0;}
.workspace-upload-strip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4;}
.workspace-upload-strip-error { color: var(--danger-color);}
.workspace-upload-strip-bar { height: 3px; margin-top: 3px; border-radius: 2px; background: var(--bg-hover); overflow: hidden;}
.workspace-upload-strip-fill { height: 100%; background: var(--accent-color); border-radius: 2px; transition: width 0.15s ease;}
/* ── HTML tree rows (replaces old SVG approach) ── */.workspace-tree-list { margin: 0; padding: 0; outline: none;}
.workspace-tree-list:focus-visible { outline: 1px solid var(--accent-color); outline-offset: -1px; border-radius: 3px;}
.workspace-row { display: flex; align-items: center; height: var(--workspace-row-height); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; white-space: nowrap; overflow: hidden; border-radius: 3px; gap: var(--workspace-row-gap); box-sizing: border-box; transition: background-color var(--ui-transition-fast); touch-action: manipulation;}
.workspace-row:hover,.workspace-row.selected { background: var(--bg-secondary);}
.workspace-row.drop-target { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--accent-color);}
.workspace-drag-ghost { position: fixed; top: 0; left: 0; transform: translate(-9999px, -9999px); pointer-events: none; z-index: 9999; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-sm); opacity: 0.92; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.workspace-folder-upload { flex-shrink: 0; margin-left: auto; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0 2px; display: none; align-items: center; justify-content: center; opacity: 0.6;}
.workspace-folder-upload svg { width: var(--workspace-folder-upload-icon-size); height: var(--workspace-folder-upload-icon-size);}
.workspace-row:hover .workspace-folder-upload,.workspace-row.selected .workspace-folder-upload { display: inline-flex;}
.workspace-folder-upload:hover { color: var(--accent-color); opacity: 1;}
.workspace-folder-upload:disabled { opacity: 0.3; cursor: not-allowed;}
.workspace-caret { flex-shrink: 0; width: var(--workspace-caret-box-size); height: var(--workspace-caret-box-size); display: flex; align-items: center; justify-content: center;}
.workspace-caret svg { width: var(--workspace-caret-icon-size); height: var(--workspace-caret-icon-size); fill: var(--text-secondary); display: block; overflow: visible;}
.workspace-node-icon { flex-shrink: 0; width: var(--workspace-file-icon-size); height: var(--workspace-file-icon-size); color: var(--text-secondary); stroke-linecap: round; stroke-linejoin: round; -webkit-user-drag: none;}
.workspace-node-icon.folder { width: var(--workspace-folder-icon-size); height: var(--workspace-folder-icon-size);}
.workspace-label { font-size: var(--workspace-tree-font-size); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; line-height: 1.2; user-select: none; -webkit-user-select: none;}
.workspace-label-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; -webkit-user-drag: none;}
.workspace-rename-input { flex: 1; min-width: 0; font-size: var(--workspace-tree-font-size); line-height: var(--workspace-rename-input-line-height); height: var(--workspace-rename-input-height); padding: 0 4px; border-radius: 3px; border: 1px solid var(--accent-color); background: var(--bg-primary); color: var(--text-primary); outline: none;}
.workspace-count { font-size: var(--workspace-count-font-size); color: var(--text-secondary); opacity: 0.6; margin-left: 4px; flex-shrink: 0; display: inline-flex; align-items: center; height: 100%; line-height: 1;}
/* ── Splitter ── */.workspace-splitter { display: none; width: 4px; flex-shrink: 0; cursor: col-resize; background: transparent; position: relative; z-index: 50; touch-action: none; opacity: 1; transition: width var(--ui-transition-fast), opacity var(--ui-transition-fast);}
.workspace-splitter::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; background: var(--border-color); transition: background 0.15s;}
.workspace-splitter:hover::after,.workspace-splitter.dragging::after { background: var(--accent-color); width: 2px;}
.editor-splitter { width: 4px; flex-shrink: 0; cursor: col-resize; background: transparent; position: relative; z-index: 10; touch-action: none; opacity: 1; transition: width var(--ui-transition-fast), opacity var(--ui-transition-fast);}
.editor-splitter::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; background: var(--border-color); transition: background 0.15s;}
.editor-splitter:hover::after,.editor-splitter.dragging::after { background: var(--accent-color);}
/* ── Horizontal splitter between tree and preview ── */.workspace-preview-splitter-h { height: 5px; flex-shrink: 0; cursor: row-resize; background: transparent; position: relative; z-index: 10; transition: background 0.15s; touch-action: none;}
.workspace-preview-splitter-h::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: var(--border-color); transition: background 0.15s;}
.workspace-preview-splitter-h:hover::after,.workspace-preview-splitter-h.dragging::after { background: var(--accent-color);}
.workspace-preview { height: var(--preview-height, 280px); min-height: 80px; overflow: auto; padding: var(--spacing-xs); background-color: var(--bg-primary); flex-shrink: 0; box-sizing: border-box; animation: fadeSlideIn 0.2s ease-out; transition: background-color var(--ui-transition-fast), border-color var(--ui-transition-fast), opacity var(--ui-transition-fast);}
.workspace-preview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xs); margin-bottom: 2px;}
.workspace-preview-actions { display: inline-flex; align-items: center; gap: 6px;}
.workspace-preview-title { font-size: 12px; color: var(--text-secondary); word-break: break-all;}
.workspace-preview-meta { display: flex; gap: var(--spacing-sm); font-size: 11px; color: var(--text-secondary); margin-bottom: 2px;}
.workspace-preview-meta-inline { flex-wrap: wrap; row-gap: 4px; column-gap: 10px; margin-bottom: var(--spacing-xs);}
.workspace-preview-meta-inline span { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; word-break: break-word;}
.workspace-preview-meta-inline strong { color: var(--text-primary); font-weight: 600;}
.workspace-preview-body,.workspace-preview-render-host { min-height: 0;}
.workspace-preview-text { overflow: auto; background: var(--bg-secondary); border-radius: var(--radius-sm); padding: var(--spacing-xs); font-size: 12px; transition: background-color var(--ui-transition-fast), border-color var(--ui-transition-fast), color var(--ui-transition-fast);}
.workspace-folder-starburst { margin-top: var(--spacing-xs); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-secondary); padding: var(--spacing-xs);}
.workspace-folder-starburst-svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto var(--spacing-sm) auto; transform-origin: center; transition: transform 0.2s ease, opacity 0.2s ease;}
.workspace-folder-starburst-svg.is-zooming { transform: scale(0.985); opacity: 0.88;}
.workspace-folder-starburst-svg path { cursor: pointer; transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease; transform-origin: 120px 120px;}
.workspace-folder-starburst-segment.is-hovered { opacity: 0.92; filter: brightness(1.08); transform: scale(1.01);}
.workspace-folder-starburst-center-hit { cursor: default;}
.workspace-folder-starburst-center-hit text { pointer-events: none;}
.workspace-folder-starburst-center-hit.is-drill { cursor: pointer;}
.workspace-folder-starburst-center-hit.is-drill .workspace-folder-starburst-center { stroke: var(--accent-color);}
.workspace-folder-starburst-center-hit.is-drill:hover .workspace-folder-starburst-center { filter: brightness(1.05);}
.workspace-folder-starburst-total-label { fill: var(--text-secondary); font-size: 9px; letter-spacing: 0.02em; text-transform: uppercase;}
.workspace-folder-starburst-total-value { fill: var(--text-primary); font-size: 10px; font-weight: 600;}
.workspace-folder-starburst-total-pct { fill: var(--text-secondary); font-size: 9px;}
.workspace-folder-starburst-legend { display: grid; grid-template-columns: 1fr; gap: 4px;}
.workspace-folder-starburst-legend-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; font-size: 11px; color: var(--text-secondary);}
.workspace-folder-starburst-swatch { width: 8px; height: 8px; border-radius: 999px; display: inline-block;}
.workspace-folder-starburst-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.workspace-folder-starburst-size,.workspace-folder-starburst-pct { font-variant-numeric: tabular-nums; white-space: nowrap;}
.workspace-folder-starburst-note { margin-top: 6px; font-size: 11px; color: var(--text-secondary);}
.workspace-preview-image img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm);}
.editor-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background-color: var(--bg-primary); overflow: hidden; position: relative;}
/* Compact chat when editor is open */.app-shell.pane-popout { display: flex; background: var(--bg-primary);}
.app-shell.pane-popout .editor-pane-container { width: 100%; min-width: 0; max-width: none; height: 100%; flex: 1; position: relative;}
.app-shell.pane-popout .editor-pane-host { min-height: 0;}
.pane-popout-hover-zone { position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 11;}
.pane-popout-controls { position: absolute; top: 12px; right: 12px; z-index: 12; opacity: 0; transform: translateY(-4px); transition: opacity var(--ui-transition-fast), transform var(--ui-transition-fast); pointer-events: none;}
.app-shell.pane-popout .pane-popout-hover-zone:hover ~ .pane-popout-controls,.app-shell.pane-popout .editor-pane-container:focus-within .pane-popout-controls,.pane-popout-controls:hover,.pane-popout-controls:focus-within { opacity: 1; transform: translateY(0); pointer-events: auto;}
.pane-popout-controls-menu { position: relative;}
.pane-popout-controls-trigger { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; max-width: min(60vw, 320px); padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent); background: color-mix(in srgb, var(--bg-secondary) 84%, transparent); color: var(--text-primary); backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); cursor: pointer; user-select: none; -webkit-user-select: none;}
.pane-popout-controls-trigger::-webkit-details-marker { display: none;}
.pane-popout-controls-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600;}
.pane-popout-controls-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; max-width: min(70vw, 320px); display: grid; gap: 8px; padding: 10px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: color-mix(in srgb, var(--bg-primary) 94%, transparent); backdrop-filter: blur(12px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);}
.pane-popout-controls-section { display: grid; gap: 8px;}
.pane-popout-controls-section-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em;}
.pane-popout-controls-list { display: grid; gap: 6px;}
.pane-popout-controls-item,.pane-popout-controls-action { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 34px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--text-primary); cursor: pointer; font: inherit; text-align: left;}
.pane-popout-controls-icon-button { justify-content: center; width: 28px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 999px;}
.pane-popout-controls-icon-button > svg,.pane-popout-controls-icon-button > svg * { pointer-events: none;}
.pane-popout-controls-item:hover,.pane-popout-controls-item:focus-visible,.pane-popout-controls-action:hover,.pane-popout-controls-action:focus-visible { background: var(--bg-hover);}
.pane-popout-controls-item.active { background: color-mix(in srgb, var(--accent-color) 14%, transparent); border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);}
.app-shell.editor-open > .container { font-size: 0.8em;}
.app-shell.editor-open > .container .post-content { font-size: inherit;}
.app-shell.editor-open > .container .compose-input { font-size: inherit; min-height: 2em; padding: 6px 8px;}
.app-shell.editor-open > .container .agent-status { font-size: inherit;}
.app-shell.editor-open > .container .post-avatar { width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 11px;}
.app-shell.editor-open > .container .post-avatar.has-image img { width: 28px; height: 28px;}