Something went wrong. Try again.
I'm going to build my own OpenClaw, with blackjack... and bun!
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306/* * shell.css - Extracted from styles.css during the layered stylesheet split. * Ownership: Top-level app shell layout and shared chat-window chrome. * Keep selector names/order stable in this first move-only tranche. */
/* Layout */.app-shell { position: relative; display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden;}
.app-shell.chat-only { justify-content: center;}
.app-shell.chat-only .container { width: 100%; max-width: min(100%, 980px); margin: 0 auto;}
.app-shell.resume-layout-settling > .workspace-sidebar,.app-shell.resume-layout-settling > .workspace-splitter,.app-shell.resume-layout-settling > .container,.app-shell.resume-layout-settling > .editor-pane-container { transition: none !important;}
.system-meters-hud { pointer-events: none;}
.system-meters-hud-overlay { position: absolute; top: 10px; right: 12px; z-index: 50;}
.system-meters-hud-inline { display: none; flex: 0 0 auto;}
.system-meters-card { display: inline-flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 7px 9px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent); background: color-mix(in srgb, var(--bg-primary) 76%, transparent); backdrop-filter: blur(10px); box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color, #000) 14%, transparent); pointer-events: auto; appearance: none; color: inherit; font: inherit; text-align: left; cursor: pointer; user-select: none; transition: transform 140ms ease, opacity 140ms ease, padding 140ms ease, min-width 140ms ease;}
.system-meters-card:hover { transform: translateY(-1px);}
.system-meters-card:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px;}
.system-meters-hud.is-collapsed .system-meters-card { min-width: 0; padding: 6px 5px; opacity: 0.78;}
.system-meters-hud-overlay.is-collapsed .system-meters-card,.system-meters-hud-overlay.is-collapsed .system-meters-card:hover { transform: translateX(8px);}
.system-meters-hud-inline.is-collapsed .system-meters-card,.system-meters-hud-inline.is-collapsed .system-meters-card:hover { transform: translateX(6px);}
.system-meters-collapse-tab { display: inline-flex; align-items: center; justify-content: center; min-width: 12px; font-size: 12px; line-height: 1; color: var(--text-secondary);}
.system-meters-row { display: grid; grid-template-columns: 34px 56px auto; align-items: center; gap: 8px; font-size: 11px; line-height: 1;}
.system-meters-label { font-weight: 700; color: var(--text-secondary);}
.system-meters-value { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary);}
.system-meters-spark { width: 56px; height: 16px; overflow: visible;}
.system-meters-spark path { fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;}
.system-meters-row.cpu .system-meters-spark path { stroke: color-mix(in srgb, var(--accent-color) 88%, var(--text-primary));}
.system-meters-row.ram .system-meters-spark path { stroke: color-mix(in srgb, var(--accent-color) 55%, var(--success-color) 45%);}
.system-meters-row.swap .system-meters-spark path { stroke: color-mix(in srgb, var(--accent-color) 60%, var(--warning-color, #f59e0b) 40%);}
@media (max-width: 900px) { .chat-window-header { flex-wrap: wrap; align-items: flex-start; }
.chat-window-header-main { flex: 1 1 100%; }
.system-meters-hud-overlay { top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px)); right: max(8px, calc(env(safe-area-inset-right, 0px) + 8px)); }
.system-meters-hud-overlay .system-meters-card { min-width: 0; max-width: min(72vw, 280px); padding: 6px 9px; border-radius: 999px; backdrop-filter: blur(12px); }
.system-meters-hud-overlay.is-collapsed .system-meters-card { padding: 6px 5px; }
.system-meters-hud-overlay.is-collapsed .system-meters-card, .system-meters-hud-overlay.is-collapsed .system-meters-card:hover { transform: translateX(10px); }
.system-meters-compact-summary { display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1; font-weight: 600; color: var(--text-primary); }
.chat-window-header-actions { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }}
.chat-window-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-color); background: var(--bg-secondary);}
.chat-window-header-actions { display: flex; align-items: center; gap: var(--spacing-sm); min-width: 0;}
.chat-window-header-main { display: flex; flex-direction: column; min-width: 0; gap: 2px;}
.chat-window-header-title { font-family: var(--font-mono, monospace); font-size: var(--font-size-sm); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chat-window-header-subtitle { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chat-window-header-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary); font-size: 10.5px; line-height: 1; white-space: nowrap;}
.chat-window-header-button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font: inherit; cursor: pointer; white-space: nowrap;}
.chat-window-header-button:hover { background: var(--bg-hover);}
.chat-window-header-button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px;}
.chat-window-branch-picker-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0;}
.chat-window-branch-picker-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap;}
.chat-window-branch-picker { min-width: 180px; max-width: min(38vw, 340px); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); padding: 6px 10px; font: inherit;}