styles.css

:root {
  --neutral-tint-rgb: rgb(90 132 154);
  --background: #f7f9fc; --foreground: rgb(27 33 43);
  --card: #fff; --primary: oklch(0.56 0.1 214); --primary-foreground: oklch(0.98 0.004 230);
  --muted: color-mix(in srgb, var(--neutral-tint-rgb) 11%, transparent);
  --muted-foreground: rgb(87 98 114 / 0.9);
  --destructive: oklch(0.58 0.22 22); --destructive-foreground: oklch(0.99 0.004 90);
  --border: color-mix(in srgb, var(--neutral-tint-rgb) 20%, transparent);
  --input: color-mix(in srgb, var(--neutral-tint-rgb) 13%, transparent);
  --ring: oklch(0.56 0.1 214);
  --sidebar: rgb(255 255 255 / 0.92); --sidebar-foreground: var(--foreground);
  --sidebar-card-bg: color-mix(in srgb, var(--neutral-tint-rgb) 6%, transparent);
  --sidebar-input-bg: color-mix(in srgb, var(--neutral-tint-rgb) 9%, transparent);
  --sidebar-control-off: color-mix(in srgb, var(--neutral-tint-rgb) 12%, transparent);
  --sidebar-control-on: color-mix(in oklch, var(--primary) 74%, var(--surface-2));
  --radius: 1rem; --radius-small: 6px; --radius-card: 14px; --radius-container: 20px;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace;
  --shadow-2xs: 0 1px 1px rgba(0,0,0,.04); --shadow-xs: 0 2px 8px rgba(0,0,0,.06);
  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,.1); --shadow-md: 0 8px 24px -6px rgba(0,0,0,.14);
  --shadow-lg: 0 16px 48px -12px rgba(0,0,0,.18);
  --panel: color-mix(in oklch, var(--surface-1) 96%, white 4%);
  --surface-0: var(--background); --surface-1: var(--card);
  --surface-2: color-mix(in srgb, var(--neutral-tint-rgb) 8%, transparent);
  --surface-3: color-mix(in srgb, var(--neutral-tint-rgb) 14%, transparent);
  --surface-selected: color-mix(in srgb, var(--neutral-tint-rgb) 20%, transparent);
  --plane-workspace-bg: color-mix(in oklch, var(--surface-1) 92%, var(--surface-0) 8%);
  --plane-sidepanel-bg: color-mix(in oklch, var(--surface-2) 12%, var(--surface-1));
  --plane-card-bg: color-mix(in oklch, var(--sidebar-card-bg) 92%, var(--surface-1));
  --chat-surface-bg: color-mix(in oklch, var(--surface-1) 92%, white 8%);
  --chat-assistant-bg: color-mix(in oklch, var(--surface-2) 92%, var(--surface-1));
  --chat-user-bg: color-mix(in srgb, var(--neutral-tint-rgb) 8%, transparent);
  --action-bg: color-mix(in oklch, var(--primary) 92%, white 8%);
  --action-bg-hover: color-mix(in oklch, var(--primary) 88%, white 12%);
  --action-fg: var(--primary-foreground);
  --danger-soft-bg: color-mix(in oklch, var(--destructive) 13%, transparent);
  --danger-soft-fg: color-mix(in oklch, var(--destructive) 78%, black 22%);
  --status-idle-bg: color-mix(in oklch, var(--surface-3) 86%, transparent);
  --status-idle-fg: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground) 28%);
  --status-running-bg: color-mix(in oklch, #1ea465 16%, transparent);
  --status-running-fg: color-mix(in oklch, #0e6a40 72%, black 28%);
  --status-error-bg: var(--danger-soft-bg); --status-error-fg: var(--danger-soft-fg);
  --status-connecting-bg: color-mix(in oklch, #b97811 16%, transparent);
  --status-connecting-fg: color-mix(in oklch, #6a4100 78%, black 22%);
  --status-connected-bg: color-mix(in oklch, #21888f 18%, transparent);
  --status-connected-fg: color-mix(in oklch, #15585c 78%, black 22%);
  --status-disconnected-bg: var(--status-idle-bg); --status-disconnected-fg: var(--status-idle-fg);
  --status-approval-bg: color-mix(in oklch, #a77113 16%, transparent);
  --status-approval-fg: color-mix(in oklch, #6a4504 82%, black 18%);
  --command-bg: color-mix(in oklch, #081018 88%, var(--surface-1)); --command-fg: rgb(234 242 248 / 0.98);
  --elev-overlay-1: rgb(255 255 255 / 0.05); --elev-overlay-2: rgb(255 255 255 / 0.08);
}
.dark {
  --neutral-tint-rgb: rgb(108 146 176);
  --background: #0b1118; --foreground: rgb(246 250 255 / 0.97);
  --card: #121a24; --primary: #22a8cc; --primary-foreground: rgb(247 252 255 / 0.98);
  --muted-foreground: rgb(224 236 248 / 0.78);
  --destructive: oklch(0.62 0.21 22); --destructive-foreground: rgb(255 255 255 / 0.96);
  --border: color-mix(in srgb, var(--neutral-tint-rgb) 30%, transparent);
  --ring: #30bce2;
  --sidebar: #0f1721; --sidebar-foreground: rgb(246 250 255 / 0.94);
  --sidebar-card-bg: color-mix(in oklch, var(--surface-2) 88%, var(--surface-1));
  --sidebar-input-bg: color-mix(in oklch, var(--surface-2) 84%, var(--surface-1));
  --panel: color-mix(in oklch, var(--surface-1) 96%, black 4%);
  --surface-0: #0b1118; --surface-1: #121a24; --surface-2: #1a2533; --surface-3: #223142;
  --surface-selected: #26384c;
  --plane-workspace-bg: color-mix(in oklch, var(--surface-1) 94%, var(--surface-0) 6%);
  --plane-sidepanel-bg: color-mix(in oklch, var(--surface-2) 20%, var(--surface-1));
  --plane-card-bg: color-mix(in oklch, var(--surface-2) 76%, var(--surface-1));
  --chat-surface-bg: color-mix(in oklch, var(--surface-1) 88%, black 12%);
  --chat-assistant-bg: color-mix(in oklch, var(--surface-2) 90%, var(--surface-1));
  --chat-user-bg: color-mix(in oklch, var(--surface-1) 86%, var(--surface-0));
  --action-bg: color-mix(in oklch, var(--primary) 88%, white 12%);
  --action-bg-hover: color-mix(in oklch, var(--primary) 84%, white 16%);
  --danger-soft-bg: color-mix(in oklch, var(--destructive) 18%, transparent);
  --danger-soft-fg: color-mix(in oklch, var(--destructive) 82%, white 18%);
  --status-running-bg: color-mix(in oklch, #20aa68 22%, transparent);
  --status-running-fg: color-mix(in oklch, #7be3ad 68%, white 32%);
  --status-connecting-bg: color-mix(in oklch, #b97811 24%, transparent);
  --status-connecting-fg: color-mix(in oklch, #f5cb86 66%, white 34%);
  --status-connected-bg: color-mix(in oklch, #239199 24%, transparent);
  --status-connected-fg: color-mix(in oklch, #9be5e8 68%, white 32%);
  --status-approval-bg: color-mix(in oklch, #a77113 26%, transparent);
  --status-approval-fg: color-mix(in oklch, #f2c986 68%, white 32%);
  --shadow-2xs: 0 1px 2px rgba(0,0,0,.2); --shadow-xs: 0 2px 8px rgba(0,0,0,.22);
  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,.3); --shadow-md: 0 8px 24px -6px rgba(0,0,0,.36);
  --shadow-lg: 0 16px 48px -12px rgba(0,0,0,.44);
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--background);color:var(--foreground);min-height:100vh;overflow:hidden;letter-spacing:0.005em}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--background)}
button:not(:disabled),[role="button"]:not([aria-disabled="true"]){cursor:pointer}
*{scrollbar-width:thin;scrollbar-color:color-mix(in oklch,var(--foreground) 20%,var(--border)) transparent}
.ui-panel{border:0;border-radius:var(--radius-card);background:var(--panel);box-shadow:var(--shadow-sm)}
.dark .ui-panel{background:var(--plane-workspace-bg);box-shadow:var(--shadow-xs)}
.ui-card{border:0;border-radius:var(--radius-card);background:var(--sidebar-card-bg);box-shadow:var(--shadow-2xs)}
.dark .ui-card{background:var(--plane-card-bg);box-shadow:inset 0 1px 0 var(--elev-overlay-1),var(--shadow-2xs)}
.ui-card-selected{background:var(--surface-selected);box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--primary) 38%,transparent),var(--shadow-xs)}
.dark .ui-card-selected{background:color-mix(in oklch,var(--surface-selected) 78%,var(--plane-card-bg));box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--primary) 48%,transparent),var(--shadow-xs)}
.ui-card-select-indicator{pointer-events:none;position:absolute;left:0;top:.7rem;bottom:.7rem;width:5px;border-radius:0 9999px 9999px 0;background:linear-gradient(180deg,color-mix(in oklch,var(--primary) 96%,white 4%),color-mix(in oklch,var(--primary) 68%,var(--surface-selected)));transition:opacity 180ms ease}
.ui-topbar{border:0;background:color-mix(in oklch,var(--surface-1) 96%,var(--surface-0));box-shadow:var(--shadow-2xs)}
.dark .ui-topbar{background:color-mix(in oklch,var(--surface-1) 94%,var(--surface-0));box-shadow:0 1px 4px rgba(0,0,0,.25)}
.ui-input{border:0;background:var(--sidebar-input-bg);border-radius:var(--radius-small);padding:8px 12px;font-size:13px;color:var(--foreground);outline:none;box-shadow:inset 0 0 0 0 transparent;transition:box-shadow 180ms ease}
.ui-input:focus{box-shadow:0 0 0 2px color-mix(in oklch,var(--ring) 44%,transparent)}
.ui-btn-primary{display:inline-flex;min-height:36px;align-items:center;justify-content:center;border-radius:var(--radius-small);border:0;background:var(--action-bg);color:var(--action-fg);padding:6px 14px;font-size:12px;font-weight:600;font-family:var(--font-mono);letter-spacing:0.05em;box-shadow:var(--shadow-xs);transition:background 180ms,box-shadow 180ms,transform 80ms}
.ui-btn-primary:hover{background:var(--action-bg-hover);box-shadow:var(--shadow-sm)}
.ui-btn-primary:active{transform:scale(0.97)}
.ui-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ui-btn-secondary{display:inline-flex;min-height:34px;align-items:center;justify-content:center;border-radius:var(--radius-small);border:0;background:color-mix(in oklch,var(--surface-2) 90%,var(--surface-1));color:color-mix(in oklch,var(--foreground) 74%,var(--muted-foreground) 26%);padding:6px 14px;font-size:12px;font-weight:600;box-shadow:var(--shadow-2xs);transition:background 180ms,box-shadow 180ms,transform 80ms}
.ui-btn-secondary:hover{background:color-mix(in oklch,var(--surface-3) 90%,var(--surface-1));box-shadow:var(--shadow-xs)}
.ui-btn-secondary:active{transform:scale(0.97)}
.ui-btn-ghost{display:inline-flex;min-height:34px;align-items:center;justify-content:center;border-radius:var(--radius-small);border:0;background:transparent;color:color-mix(in oklch,var(--foreground) 76%,var(--muted-foreground) 24%);padding:6px 14px;font-size:12px;font-weight:600;transition:background 180ms}
.ui-btn-ghost:hover{background:color-mix(in oklch,var(--surface-2) 80%,transparent)}
.ui-btn-icon{display:inline-flex;height:28px;width:28px;align-items:center;justify-content:center;border-radius:var(--radius-small);border:0;background:color-mix(in oklch,var(--surface-3) 60%,transparent);color:color-mix(in oklch,var(--foreground) 72%,var(--muted-foreground) 28%);transition:background 180ms,color 180ms,transform 80ms}
.ui-btn-icon:hover{background:color-mix(in oklch,var(--surface-3) 92%,transparent);color:var(--foreground)}
.ui-btn-icon:active{transform:scale(0.9)}
.ui-topbar .ui-btn-icon{height:24px;width:24px;background:transparent}
.ui-topbar .ui-btn-icon:hover{background:color-mix(in oklch,var(--surface-2) 72%,transparent)}
.ui-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;font-size:10px;font-weight:600;font-family:var(--font-mono);letter-spacing:0.08em}
.ui-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-small);font-size:11px;font-weight:600;font-family:var(--font-mono);letter-spacing:0.04em}
.ui-badge-status-idle{background:var(--status-idle-bg);color:var(--status-idle-fg)}
.ui-badge-status-running{background:var(--status-running-bg);color:var(--status-running-fg)}
.ui-badge-status-error{background:var(--status-error-bg);color:var(--status-error-fg)}
.ui-badge-status-disconnected{background:var(--status-disconnected-bg);color:var(--status-disconnected-fg)}
.ui-badge-status-connecting{background:var(--status-connecting-bg);color:var(--status-connecting-fg)}
.ui-badge-status-connected{background:var(--status-connected-bg);color:var(--status-connected-fg)}
.ui-badge-approval{background:var(--status-approval-bg);color:var(--status-approval-fg)}
.ui-segment{display:grid;gap:4px;border:0;border-radius:var(--radius-small);padding:3px;background:color-mix(in oklch,var(--surface-2) 78%,transparent);box-shadow:inset 0 1px 3px rgba(0,0,0,.06)}
.ui-segment-item{border:0;border-radius:calc(var(--radius-small) - 2px);background:transparent;color:var(--muted-foreground);padding:4px 8px;font-size:11px;font-weight:600;font-family:var(--font-mono);transition:background 180ms,color 180ms,box-shadow 180ms}
.ui-segment-item[data-active="true"]{background:var(--surface-1);color:var(--foreground);box-shadow:var(--shadow-xs)}
.ui-alert-danger{border:0;border-radius:var(--radius-small);background:var(--danger-soft-bg);color:var(--danger-soft-fg);box-shadow:inset 0 0 0 0 transparent}
.ui-command-surface{background:var(--command-bg);border:0;color:var(--command-fg);border-radius:var(--radius-small);box-shadow:var(--shadow-2xs)}
.ui-dot-status-connected{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e60}
.ui-dot-status-connecting{width:10px;height:10px;border-radius:50%;background:#eab308;animation:pulse 1.5s infinite}
.ui-dot-status-disconnected{width:10px;height:10px;border-radius:50%;background:var(--muted-foreground);opacity:.4}
.ui-menu-popover{background:var(--card);border:0;border-radius:var(--radius-card);box-shadow:var(--shadow-md)}
.ui-context-menu{position:fixed;z-index:9999;min-width:180px;background:var(--card);border:0;border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:4px;animation:ctxIn 120ms cubic-bezier(.2,.74,.2,1) both}
.ui-context-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:0;border-radius:calc(var(--radius-card) - 4px);background:transparent;color:var(--foreground);font-size:12px;font-weight:500;font-family:var(--font-sans);text-align:left;transition:background 100ms}
.ui-context-menu-item:hover{background:color-mix(in oklch,var(--surface-2) 92%,transparent)}
.ui-context-menu-item.danger{color:var(--danger-soft-fg)}
.ui-context-menu-item.danger:hover{background:var(--danger-soft-bg)}
.ui-context-menu-sep{height:0;margin:4px 8px;border:0;border-top:0;background:color-mix(in oklch,var(--surface-3) 60%,transparent);min-height:1px}
select{color-scheme:light}.dark select{color-scheme:dark}
select.ui-input,select.ui-select,.sh-input-bar select{appearance:none;background:var(--sidebar-input-bg);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius-small);padding:6px 28px 6px 10px;font-size:13px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
select.ui-input:focus,select.ui-select:focus,.sh-input-bar select:focus{outline:none;box-shadow:0 0 0 2px color-mix(in oklch,var(--ring) 44%,transparent)}
select option{background:var(--card);color:var(--foreground)}
.ui-scroll{scrollbar-width:thin}
.glass-panel{background:var(--panel);border-radius:var(--radius-container);box-shadow:var(--shadow-xs)}
.agent-avatar-selected{box-shadow:0 0 0 2px color-mix(in oklch,var(--primary) 36%,transparent)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes ctxIn{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.fade-up{animation:fadeUp 540ms cubic-bezier(.2,.74,.2,1) both}
.fade-up-delay{animation:fadeUp 540ms cubic-bezier(.2,.74,.2,1) 120ms both}
.app-layout{display:flex;height:100vh;height:100dvh;overflow:hidden}
.sidebar-area{width:280px;min-width:280px;display:flex;flex-direction:column;height:100%;background:var(--sidebar);box-shadow:2px 0 12px rgba(0,0,0,.06)}
.dark .sidebar-area{box-shadow:2px 0 16px rgba(0,0,0,.2)}
.main-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.chat-area{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--chat-surface-bg)}
.inspect-area{width:360px;min-width:360px;background:var(--sidebar);overflow-y:auto;box-shadow:-2px 0 12px rgba(0,0,0,.06)}
.dark .inspect-area{box-shadow:-2px 0 16px rgba(0,0,0,.2)}

/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  user-select: text;
  white-space: pre;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}