/* SPDX-FileCopyrightText: Copyright 2026 Alexander Orlov */ /* Canonical Syet Ayu Mirage tokens; exact upstream provenance in syet-theme-pin.json. */ :root { --focus-color: hsla(40, 94%, 64%, 1); --accent-color: hsla(212, 100%, 67%, 1); --primary-color: hsla(39, 100%, 71%, 1); --secondary-color: hsla(220, 12%, 50%, 1); --complementary-color: hsla(191, 97%, 70%, 1); --spot-color: hsla(14, 83%, 65%, 1); --highlight-color: hsla(261, 27%, 56%, 1); --info-color: hsla(220, 17%, 28%, 1); --std-back-color: hsla(220, 21%, 16%, 1); --std-front-color: hsla(220, 14%, 71%, 1); --back-color: hsla(220, 21%, 21%, 1); --front-color: hsla(220, 14%, 78%, 1); } :root{color-scheme:dark;--bg:var(--std-back-color);--panel:var(--back-color);--deep:#1a1f29;--surface:#2a3040;--line:#343c4d;--muted:var(--secondary-color);--text:var(--front-color);--bright:#f1f3f8;--accent:var(--primary-color);--blue:var(--complementary-color);--green:#bae67e;--red:#ff8f83;--session-width:370px;--terminal-height:200px;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button,select{color:var(--text);background:transparent;border:0}button:hover{color:var(--bright);background:#ffffff08}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}button{border-radius:5px}input,textarea{color:var(--text);background:var(--deep);border:1px solid var(--line);border-radius:7px;padding:10px 12px}input::placeholder,textarea::placeholder{color:#727e93}select{padding:4px 6px;border:1px solid transparent;border-radius:4px}select:hover{border-color:var(--line)}a{color:var(--blue)}kbd{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);padding:2px 5px;border:1px solid var(--line);border-radius:4px;white-space:nowrap}svg{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}.boot{height:100dvh;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--muted)}.brand-mark{width:29px;height:29px;background:#ffcc6615;color:var(--accent);border:1px solid #ffcc6628;border-radius:8px;display:grid;place-items:center;font:600 22px/1 ui-monospace,monospace}.app-shell{height:100dvh;display:flex;flex-direction:column}.topbar{height:52px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 17px;gap:12px;background:#212633}.brand{font-size:16px;font-weight:600;letter-spacing:-.5px;color:var(--bright)}.top-divider{width:1px;height:18px;background:var(--line);margin:0 7px}.workspace-title{font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center}.top-spacer{flex:1}.icon-button{width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.pill{font-size:10px;text-transform:uppercase;letter-spacing:.7px;border:1px solid #ffcc6633;border-radius:20px;color:var(--accent);padding:2px 7px}.connect-button{display:flex;gap:7px;align-items:center;font-size:12px;border:1px solid var(--line);padding:6px 10px;background:#ffffff03}.command-button{color:var(--muted);display:flex;gap:8px;align-items:center;font-size:12px;padding:5px 9px}.workspace{flex:1;min-height:0;display:flex}.sidebar{width:219px;flex:none;background:var(--deep);border-right:1px solid var(--line);display:flex;flex-direction:column}.sidebar[hidden],.terminal-pane[hidden]{display:none}.pane-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.1px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;padding:15px 16px 9px}.tree{padding:0 8px}.tree-folder{display:flex;align-items:center;gap:7px;color:var(--muted);padding:5px 9px;font-size:12px}.tree-file{display:flex;align-items:center;gap:9px;width:100%;padding:6px 12px;text-align:left;color:#aab4c5;font-size:12px;border-radius:5px}.tree-file.active{color:var(--bright);background:#73d0ff0c;box-shadow:inset 2px 0 var(--blue)}.file-glyph{font:10px ui-monospace,monospace;width:18px;color:var(--blue);text-align:center}.file-glyph.rust{color:var(--accent)}.tree-file .dirty-dot{margin-left:auto}.dirty-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}.sidebar-sessions{margin-top:35px;border-top:1px solid #343c4d88;padding-top:2px;min-height:0;overflow:auto}.session-list{padding:0 8px}.session-item{width:100%;display:flex;gap:10px;padding:10px 9px;text-align:left;border-radius:6px;align-items:flex-start;margin-bottom:3px}.session-item.active{background:#ffcc6609;box-shadow:inset 2px 0 var(--accent)}.provider-mark{font:600 12px/1 ui-monospace,monospace;border:1px solid var(--line);border-radius:6px;height:25px;width:25px;flex:none;display:grid;place-items:center;color:var(--blue)}.provider-mark.claude{color:#d9a28e}.provider-mark.copilot{color:var(--green)}.session-item-title{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px}.session-item-meta{font-size:10px;color:var(--muted);display:flex;gap:5px;align-items:center;margin-top:3px}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--green)}.status-dot.interrupted,.status-dot.stopped{background:var(--muted)}.sidebar-bottom{margin-top:auto;padding:18px 15px 12px;color:var(--muted);font-size:10px}.sidebar-bottom p{margin:0 0 7px}.main-center{display:flex;flex-direction:column;flex:1;min-width:260px;min-height:0}.editor-pane{display:flex;flex-direction:column;flex:1;min-height:100px}.tabs{height:38px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:stretch;background:#232835;overflow:auto}.editor-tab{display:flex;gap:9px;align-items:center;padding:0 15px;border-right:1px solid #343c4d77;font-size:11px;white-space:nowrap;color:var(--muted);border-radius:0;position:relative}.editor-tab.active{background:var(--bg);color:var(--bright)}.editor-tab.active:before{position:absolute;content:"";top:0;left:0;right:0;height:2px;background:var(--blue)}.breadcrumb{height:34px;flex:none;display:flex;align-items:center;padding:0 17px;gap:7px;color:var(--muted);font-size:10px}.editor-host{flex:1;min-height:0;overflow:hidden}.cm-editor{height:100%;font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important}.cm-scroller{overflow:auto!important}.cm-gutters{background:var(--bg)!important;border:0!important;padding-right:10px}.cm-lineNumbers .cm-gutterElement{color:#566177!important}.cm-activeLineGutter{background:transparent!important;color:var(--text)!important}.cm-content{padding:9px 0 70px!important}.cm-line{padding:0 20px 0 7px!important}.cm-editor.cm-focused{outline:0!important}.cm-activeLine{background:#ffffff03!important}.cm-selectionBackground{background:#73d0ff25!important}.cm-cursor{border-left-color:var(--accent)!important}.cm-searchMatch{background:#ffcc6630!important}.cm-panel{background:var(--panel)!important;color:var(--text)!important}.cm-textfield{background:var(--deep)!important}.resize-handle.horizontal{height:5px;cursor:row-resize;background:var(--line);flex:none}.resize-handle.vertical{width:5px;cursor:col-resize;background:var(--line);flex:none}.resize-handle:hover,.resize-handle:focus{background:var(--blue)}.terminal-pane{height:var(--terminal-height);min-height:100px;display:flex;flex-direction:column;background:var(--deep)}.terminal-header{display:flex;align-items:center;height:32px;flex:none;font-size:10px;padding:0 14px;border-bottom:1px solid #343c4d77;color:var(--muted);gap:8px}.terminal-header .top-spacer{flex:1}.terminal-host{flex:1;min-height:0;padding:9px 13px 0;overflow:hidden}.terminal-note{font-size:10px;color:var(--accent);padding:5px 13px;display:none}.terminal-note.visible{display:block}.xterm{height:100%}.xterm-viewport{background:var(--deep)!important}.session-pane{width:var(--session-width);flex:none;display:flex;flex-direction:column;min-height:0;background:#222733}.session-header{padding:12px 16px 9px;border-bottom:1px solid var(--line);flex:none}.session-heading{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--bright)}.session-heading h1{font-size:12px;font-weight:500;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-settings{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:10px;color:var(--muted)}.session-settings select{max-width:160px;font-size:10px}.session-worktree{font:9px ui-monospace,monospace;color:#748097;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}.fixture-banner{font-size:10px;background:#ffcc6608;color:#c8af7b;border-bottom:1px solid #ffcc6620;padding:8px 16px;flex:none}.transcript-toolbar{display:flex;align-items:center;gap:5px;padding:7px 12px;flex:none;font-size:10px;color:var(--muted)}.transcript-toolbar button{font-size:10px;padding:3px 5px}.transcript-count{margin-left:auto;font:9px ui-monospace,monospace}.transcript{flex:1;min-height:70px;overflow:auto;padding:0 16px;scrollbar-gutter:stable}.event-row{padding:14px 0;border-bottom:1px solid #343c4d55;overflow:hidden;min-height:80px;max-height:260px}.event-heading{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--blue);margin-bottom:8px}.event-heading .timestamp{margin-left:auto;color:#6f7b91;font:8px ui-monospace,monospace}.event-row.user .event-heading{color:var(--accent)}.event-content{font-size:11px;line-height:1.7;color:#abb7cb;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;white-space:pre-wrap;overflow-wrap:anywhere}.event-content code{font:10px ui-monospace,monospace;background:#ffffff06;border-radius:3px;padding:1px 3px;color:var(--green)}.event-tool{font:9px/1.7 ui-monospace,monospace;margin:0;padding:10px;background:var(--deep);border:1px solid #343c4d88;border-radius:6px;max-height:150px;overflow:auto;color:#93a4bb;white-space:pre-wrap;overflow-wrap:anywhere}.event-expand{font-size:10px;color:var(--blue);padding:5px 0;margin-top:2px}.composer{flex:none;padding:12px 14px;border-top:1px solid var(--line)}.composer-box{border:1px solid #475064;border-radius:8px;background:#1f2430;padding:0 0 6px;transition:border-color .15s}.composer-box:focus-within{border-color:#73d0ff88}.composer textarea{border:0;background:transparent;border-radius:8px;resize:none;width:100%;min-height:70px;max-height:180px;display:block;padding:12px;font-size:11px;line-height:1.6}.composer textarea:focus-visible{outline:0}.composer-actions{display:flex;align-items:center;padding:0 8px;color:var(--muted);font-size:9px;gap:6px}.composer-actions .send-button{margin-left:auto;display:flex;gap:6px;align-items:center;color:var(--bg);background:var(--accent);padding:4px 9px;font-weight:600;font-size:10px}.composer-foot{margin-top:7px;display:flex;justify-content:space-between;font-size:9px;color:#737f94}.statusbar{height:25px;flex:none;border-top:1px solid var(--line);background:#212633;display:flex;align-items:center;padding:0 14px;gap:16px;font-size:9px;color:var(--muted)}.statusbar .connection{display:flex;align-items:center;gap:5px}.statusbar .top-spacer{flex:1}.notice{position:fixed;left:240px;bottom:42px;right:400px;border:1px solid #ffcc6640;background:#30313a;padding:10px 14px;border-radius:7px;z-index:5;font-size:11px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 40px #0004}.notice[hidden]{display:none}.notice span{flex:1}dialog{border:1px solid #4b556a;background:var(--panel);color:var(--text);padding:0;border-radius:12px;box-shadow:0 20px 90px #0008;max-width:min(580px,90vw);width:520px}dialog::backdrop{background:#11151ccc;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 10px}.dialog-head h2{font-size:15px;font-weight:500;margin:0;color:var(--bright)}.dialog-body{padding:8px 22px 22px;font-size:12px;color:var(--muted)}.dialog-body p{margin:0 0 12px}.dialog-body label{display:block;margin-bottom:6px;color:var(--text);font-size:11px}.dialog-body input,.dialog-body select{width:100%;margin-bottom:14px}.dialog-body pre{font:10px/1.6 ui-monospace,monospace;padding:12px;border:1px solid var(--line);border-radius:6px;background:var(--deep);white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;color:var(--text)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:17px}.button{border:1px solid var(--line);padding:7px 12px;font-size:11px;border-radius:6px}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}.button.danger{background:#ff8f8315;border-color:#ff8f8340;color:var(--red)}.dialog-error{color:var(--red);font-size:11px;min-height:16px;white-space:pre-wrap}.palette-dialog{width:580px;margin-top:15vh}.palette-search{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 16px;gap:10px}.palette-search input{border:0;background:transparent;width:100%;padding:17px 0;margin:0;outline:0}.palette-search svg{color:var(--accent)}.palette-list{max-height:350px;overflow:auto;padding:6px}.palette-item{display:flex;width:100%;align-items:center;text-align:left;padding:9px 11px;font-size:12px;gap:12px}.palette-item.selected{background:#73d0ff10;color:var(--blue)}.palette-item kbd{margin-left:auto}.palette-footer{border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:14px;color:var(--muted);font-size:10px}.search-result{display:block;width:100%;text-align:left;padding:9px;border:1px solid var(--line);margin-top:7px;border-radius:6px}.search-result small{display:block;color:var(--muted);font:10px ui-monospace,monospace}.diff{color:var(--text);max-height:55vh!important}.diff-line.add{color:var(--green)}.diff-line.remove{color:var(--red)}.checkbox-line{display:flex!important;gap:9px;align-items:flex-start;margin-top:12px!important}.checkbox-line input{width:auto;margin-top:4px}.empty{padding:30px 16px;color:var(--muted);font-size:11px;text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} @media(max-width:1050px){.sidebar{width:180px}.session-item-title{max-width:108px}.session-pane{width:310px}.topbar .command-button span{display:none}.notice{left:200px;right:340px}}@media(max-width:800px){.sidebar{display:none}.workspace-title{display:none}.top-divider{display:none}.session-pane{width:290px}.notice{left:20px;right:20px}.main-center{min-width:210px}.topbar{padding:0 10px}.connect-button{font-size:10px}.command-button{display:none}.statusbar{gap:7px}.statusbar .optional{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} .request-list{padding:5px 14px;display:flex;gap:6px;flex:none}.request-list:empty{display:none}.request-list .button{color:var(--accent);border-color:#ffcc6644;width:100%;text-align:left}.live-stream{padding:10px 16px;border-block:1px solid var(--line);font-size:9px;max-height:140px;overflow:auto;flex:none}.live-stream[hidden]{display:none}.live-stream pre{font:10px/1.5 ui-monospace,monospace;white-space:pre-wrap;margin:4px 0} .draft-state{font:inherit;color:var(--muted);background:none;border:0;padding:0;text-align:left}.draft-state:disabled{cursor:default;opacity:1}.draft-state:not(:disabled){color:var(--accent);text-decoration:underline} .editor-tools {display:flex;align-items:center;gap:5px;padding:3px 14px;border-bottom:1px solid var(--line);min-height:32px;flex-shrink:0;} .editor-tools .icon-button {width:25px;height:25px;} .language-status {font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .language-tooltip {max-width:500px;max-height:300px;overflow:auto;padding:12px;margin:0;font-size:12px;white-space:pre-wrap;} .language-preview {max-height:50vh;overflow:auto;} .extension-row {padding:14px 0;border-bottom:1px solid var(--line);} .extension-row h3 {margin:0 0 6px;font-size:13px;} .extension-row p {margin:4px 0;color:var(--muted);} .extension-actions,.debug-controls,.team-grant {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;} .debug-output {max-height:240px;overflow:auto;} .workspace-title {border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:left;} @media (max-width:850px) {.editor-tools {padding-inline:8px;}.language-status {max-width:180px;}} :root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)} /* Compact workspace: one pane, the same retained editor and terminal instances. */ .mobile-only{display:none}.session-worktree-detail{overflow-wrap:anywhere;font-family:ui-monospace,monospace}.new-activity{color:var(--accent);white-space:nowrap}.new-activity[hidden]{display:none}.event-content{-webkit-line-clamp:5;max-height:96px}.event-tool{max-height:96px}.event-expand{min-height:32px}.event-row{max-height:none}.palette-search input{min-width:0}.palette-search .icon-button{flex:none}.file-sheet .dirty-dot{margin-left:8px}.session-sheet .session-item{display:block}.session-sheet .session-item-meta{font-size:12px}.private-workspace-button{margin-block:4px 16px}.dialog-body{max-height:calc(85dvh - 70px);overflow:auto;overscroll-behavior:contain}.dialog-head{flex:none}.app-shell{min-width:0}.workspace-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0} @media(max-width:800px),(max-width:1000px) and (max-height:500px){ :root{font-size:14px} .app-shell{position:fixed;inset-inline:0;top:var(--app-top,0px);height:var(--app-height,100dvh);overflow:hidden} .mobile-only{display:flex} .topbar{height:auto;min-height:60px;padding:calc(6px + var(--safe-top)) calc(12px + var(--safe-right)) 6px calc(12px + var(--safe-left));gap:8px;background:#202631} .topbar .brand-mark{width:30px;height:30px;flex:none}.topbar .brand,.topbar .top-divider,.topbar .pill,.topbar .top-spacer{display:none} .workspace-title{display:flex;flex:1;min-height:44px;max-width:none;font-size:14px;font-weight:500;gap:8px;padding:4px 2px} .workspace-title svg{width:18px;height:18px;color:var(--accent);flex:none} .topbar .command-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;flex:none;border:1px solid var(--line);border-radius:10px} .topbar .command-button span,.topbar .command-button kbd,.connect-button span{display:none} .connect-button{width:44px;height:44px;padding:0;justify-content:center;border-radius:10px;flex:none}.connect-button svg{width:19px;height:19px} .workspace{padding-inline:var(--safe-left) var(--safe-right);min-width:0;overflow:hidden} .sidebar,.resize-handle,.statusbar{display:none!important} .main-center{min-width:0;width:100%;flex:1}.editor-pane{min-height:0}.terminal-pane{height:auto;flex:1;min-height:0;width:100%}.session-pane{width:100%;min-width:0;flex:1;background:var(--bg)} .app-shell[data-mobile-pane="ai"] .main-center,.app-shell[data-mobile-pane="code"] .session-pane,.app-shell[data-mobile-pane="terminal"] .session-pane,.app-shell[data-mobile-pane="code"] .terminal-pane,.app-shell[data-mobile-pane="terminal"] .editor-pane{display:none!important} .mobile-nav{flex:none;gap:4px;min-height:62px;border-top:1px solid var(--line);padding:5px calc(12px + var(--safe-right)) calc(5px + var(--safe-bottom)) calc(12px + var(--safe-left));background:#202631} .mobile-pane-button{position:relative;flex:1;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px;font-weight:500;border-radius:10px} .mobile-pane-button[aria-current="page"]{color:var(--accent);background:#ffcc6610}.mobile-pane-button svg{width:19px;height:19px} button,.icon-button,.editor-tools .icon-button,.button,select{min-height:44px;min-width:44px;touch-action:manipulation} .icon-button{width:44px;height:44px}.button{font-size:13px;padding:10px 13px}.command-button{display:flex;min-height:44px} input,textarea,select,.cm-content,.cm-textfield{font-size:16px!important} .session-header{padding:5px 16px 9px;border-bottom:1px solid #343c4d80} .mobile-session-tools{gap:8px;align-items:center}.session-picker{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:15px;font-weight:600;color:var(--bright);padding:6px 0}.session-picker:after{content:' v';font-size:11px;color:var(--muted)} .session-heading{gap:8px;color:var(--muted)}.session-heading h1{font-size:12px;font-weight:400}.session-heading .provider-mark{width:20px;height:20px;font-size:10px}.session-heading .icon-button{margin-left:auto;min-height:32px;height:32px} .session-header>.session-settings,.session-header>.session-worktree,.session-header>.command-button{display:none} .fixture-banner{padding:7px 16px;font-size:11px;line-height:1.4}.transcript-toolbar{padding:3px 12px;gap:4px;min-height:50px}.transcript-toolbar button{font-size:12px;padding:7px;min-width:44px}.transcript-count{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transcript-toolbar .new-activity{font-size:11px;padding:7px;margin-left:auto;border-color:#ffcc6644} .transcript{padding-inline:18px;min-height:0;scrollbar-gutter:auto;overscroll-behavior:contain;overflow-anchor:none;-webkit-overflow-scrolling:touch} .event-row{padding:18px 0 12px}.event-heading{font-size:12px;line-height:20px;margin-bottom:10px}.event-heading .timestamp{font-size:10px}.event-content{font-size:15px;line-height:24px;max-height:96px;-webkit-line-clamp:4;color:#c0cada}.event-content code{font-size:13px}.event-tool{font-size:12px;line-height:20px;max-height:100px;padding:8px 10px;overscroll-behavior:contain}.event-expand{font-size:12px;padding:7px 0;margin-top:8px;min-height:44px} .composer{padding:10px 12px 8px;background:#202631;border-top:1px solid #343c4d80}.composer-box{border-radius:13px;padding-bottom:7px}.composer textarea{font-size:16px;line-height:1.45;min-height:66px;max-height:min(150px,25dvh);padding:11px 12px}.composer-actions{padding:0 7px 0 12px;font-size:11px;gap:8px;min-height:44px}.composer-actions .send-button{height:44px;padding:8px 14px;font-size:13px;border-radius:9px}.draft-state{line-height:1.3}.composer-foot{font-size:10px;margin:5px 2px 0}.composer-foot>span:last-child{display:none} .request-list{padding:4px 12px}.request-list .button{font-size:13px}.live-stream{font-size:11px;max-height:100px}.live-stream pre{font-size:12px} .mobile-code-tools{padding:6px 10px;gap:5px;border-bottom:1px solid var(--line);overflow-x:auto;flex:none}.mobile-code-tools .button{padding-inline:10px;flex:none}.mobile-code-tools .button:first-child{display:flex;align-items:center;gap:6px}.tabs{height:46px}.editor-tab{font-size:13px;padding-inline:13px}.breadcrumb{height:30px;font-size:10px;padding-inline:12px;overflow:hidden;white-space:nowrap}.editor-tools{padding:2px 8px;gap:3px;min-height:48px}.language-status{font-size:11px;max-width:unset;min-width:0}.cm-editor{font-size:16px!important;line-height:1.6!important}.cm-line{padding-left:3px!important}.cm-gutters{padding-right:5px}.cm-content{padding-bottom:80px!important}.cm-panels{font-size:13px}.cm-panel input{max-width:42vw}.cm-panel button{min-height:44px}.cm-search{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px!important} .terminal-header{height:48px;padding-inline:14px;font-size:11px}.terminal-note{font-size:11px;line-height:1.4;padding:7px 14px}.terminal-host{padding:8px 8px 0}.terminal-keys{overflow-x:auto;gap:4px;padding:6px 8px;border-top:1px solid var(--line);flex:none;background:#202631}.terminal-key{font-size:12px;padding:7px 10px;border:1px solid var(--line);flex:none;min-width:44px;border-radius:7px}.terminal-keys .terminal-key:last-child{margin-left:auto} dialog{width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));max-width:min(580px,calc(100vw - 20px - var(--safe-left) - var(--safe-right)));max-height:calc(var(--app-height,100dvh) - 20px - var(--safe-top) - var(--safe-bottom));position:fixed;inset:auto;left:50%;top:calc(var(--app-top,0px) + var(--app-height,100dvh)/2);transform:translate(-50%,-50%);margin:0;border-radius:17px;overflow:hidden} dialog[open]{display:flex;flex-direction:column}.dialog-head{padding:10px 16px 4px;min-height:58px}.dialog-head h2{font-size:17px}.dialog-body{max-height:none;padding:8px 16px 18px;min-height:0;font-size:14px;line-height:1.5}.dialog-body label{font-size:13px}.dialog-body input,.dialog-body select{min-height:48px}.dialog-body input[type="checkbox"]{min-height:24px;width:24px;min-width:24px;margin-top:0;flex:none}.dialog-body pre{font-size:12px;max-height:35dvh}.dialog-actions{position:sticky;bottom:-18px;background:var(--panel);padding:12px 0 4px;flex-wrap:wrap;gap:7px}.dialog-error{font-size:13px}.search-result{font-size:14px;min-height:48px;padding:12px}.search-result small{font-size:11px;margin-top:4px}.session-item{padding:12px;font-size:14px;min-height:52px}.session-sheet .session-item-title{max-width:none;font-size:14px}.session-sheet .session-item-meta{font-size:12px}.extension-row h3{font-size:15px}.extension-actions .button{font-size:13px} .palette-dialog{margin:0}.palette-search{padding-inline:14px;min-height:64px;flex:none}.palette-search input{font-size:16px;padding-block:16px}.palette-list{max-height:none;min-height:0;overflow:auto}.palette-item{font-size:14px;min-height:52px;padding:10px;gap:6px}.palette-item kbd{font-size:9px;max-width:110px;overflow:hidden}.palette-footer{font-size:11px;flex:none;flex-wrap:wrap;padding:11px 16px;gap:10px} .topbar{order:0}.notice{position:static;order:1;flex:none;margin:8px 12px 0;font-size:13px;max-height:min(20%,120px);overflow:auto;overscroll-behavior:contain;align-items:flex-start;padding:9px 10px 9px 14px;border-radius:12px;box-shadow:none}.workspace{order:2}.mobile-nav{order:3} .notice>span{overflow-wrap:anywhere;align-self:center}.notice>.icon-button{position:sticky;top:0;flex:none} } @media(max-width:1000px) and (max-height:560px){.session-heading,.fixture-banner,.composer-foot,.breadcrumb{display:none}.session-header{padding-block:0}.transcript-toolbar{min-height:44px;padding-block:0}.composer{padding-block:5px}.composer textarea{min-height:46px;max-height:80px}.composer-actions{min-height:40px}.mobile-nav{min-height:50px;padding-top:2px;padding-bottom:calc(2px + var(--safe-bottom))}.mobile-pane-button{min-height:44px}.topbar{min-height:52px}.editor-tools{min-height:44px}.terminal-note{max-height:45px;overflow:auto}} @media(max-width:800px),(max-width:1000px) and (max-height:500px){.connect-button.is-connected{color:var(--green);border-color:#bae67e44}.session-heading .icon-button{min-height:44px;height:44px}.event-content{flex:none}} @media(max-width:800px),(max-width:1000px) and (max-height:500px){.session-heading h1{display:none}.mobile-session-meta{font-size:12px;color:var(--muted);align-items:center}.session-heading>.icon-button{margin-left:auto}} @media(max-width:800px),(max-width:1000px) and (max-height:500px){ :root[data-short-viewport="true"] .session-heading,:root[data-short-viewport="true"] .fixture-banner,:root[data-short-viewport="true"] .composer-foot,:root[data-short-viewport="true"] .breadcrumb{display:none} :root[data-short-viewport="true"] .session-header{padding-block:0} :root[data-short-viewport="true"] .transcript-toolbar{min-height:44px;padding-block:0} :root[data-short-viewport="true"] .composer{padding-block:5px} :root[data-short-viewport="true"] .composer textarea{min-height:46px;max-height:80px} :root[data-short-viewport="true"] .composer-actions{min-height:40px} :root[data-short-viewport="true"] .mobile-nav{min-height:50px;padding-top:2px;padding-bottom:calc(2px + var(--safe-bottom))} :root[data-short-viewport="true"] .mobile-pane-button{min-height:44px} :root[data-short-viewport="true"] .topbar{min-height:52px} :root[data-short-viewport="true"] .editor-tools{min-height:44px} :root[data-short-viewport="true"] .terminal-note{max-height:45px;overflow:auto} } /* Phone landscape shares one header row; keep room for the retained editor. */ @media(min-width:600px) and (max-width:1000px) and (max-height:500px) and (orientation:landscape){ .app-shell{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:calc(45px + var(--safe-top)) auto minmax(0,1fr);grid-template-areas:"header navigation" "notice notice" "workspace workspace";padding-bottom:var(--safe-bottom)} :root .app-shell>.topbar{grid-area:header;min-width:0;min-height:45px;height:100%;padding:var(--safe-top) 8px 0 calc(8px + var(--safe-left));gap:8px} :root .app-shell>.mobile-nav{grid-area:navigation;min-height:45px;padding:var(--safe-top) calc(8px + var(--safe-right)) 0 8px;gap:4px;border-top:0;border-bottom:1px solid var(--line);align-items:center} :root .app-shell .mobile-pane-button{flex:none;min-width:76px;min-height:44px;height:44px;gap:6px} .app-shell>.workspace{grid-area:workspace} .app-shell>.notice{grid-area:notice;max-height:46px;margin:0 calc(8px + var(--safe-right)) 0 calc(8px + var(--safe-left));padding:0 4px 0 8px;border-radius:0} .mobile-code-tools{height:45px;min-height:45px;padding:0 8px;align-items:center} .mobile-code-tools .button{height:44px;padding-block:0} .tabs{height:45px;min-height:45px} :root .app-shell .editor-tools,.breadcrumb{display:none} .composer{padding:4px 8px}.composer-box{display:flex;align-items:center;gap:6px;padding-bottom:0} .composer textarea{flex:1;min-width:0;height:44px;min-height:44px;max-height:44px;padding:8px 10px} .composer-actions{flex:none;min-height:44px;padding:0 5px 0 0}.draft-state{max-width:150px} .session-pane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:45px auto minmax(0,1fr) auto} .session-pane>.session-header{grid-area:1/1;min-width:0;overflow:hidden}.session-pane>.transcript-toolbar{grid-area:1/2;min-width:0;border-bottom:1px solid var(--line)} .session-pane>.request-list{grid-area:2/1/3/-1;height:45px;max-height:45px;align-items:center;padding:0 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid var(--line)} .session-pane>.request-list .button{flex:none;width:auto;max-width:100%;height:44px;padding-block:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .session-pane>.transcript{grid-area:3/1/4/-1}.session-pane:has(>.live-stream:not([hidden]))>.transcript{grid-column:1} .session-pane>.live-stream{grid-area:3/2;min-height:0;max-height:none;padding:4px 8px;overflow:auto;overscroll-behavior:contain} .session-pane>.composer{grid-area:4/1/5/-1} } /** * 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-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 { font-family: monospace; user-select: text; white-space: pre; } .xterm .xterm-accessibility-tree > div { transform-origin: left; width: fit-content; } .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; } /* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */ /* xterm.js customization: Override xterm's cursor style */ .xterm .xterm-scrollable-element > .scrollbar { cursor: default; } /* Arrows */ .xterm .xterm-scrollable-element > .scrollbar > .scra { cursor: pointer; font-size: 11px !important; } .xterm .xterm-scrollable-element > .visible { opacity: 1; /* Background rule added for IE9 - to allow clicks on dom node */ background:rgba(0,0,0,0); transition: opacity 100ms linear; /* In front of peek view */ z-index: 11; } .xterm .xterm-scrollable-element > .invisible { opacity: 0; pointer-events: none; } .xterm .xterm-scrollable-element > .invisible.fade { transition: opacity 800ms linear; } /* Scrollable Content Inset Shadow */ .xterm .xterm-scrollable-element > .shadow { position: absolute; display: none; } .xterm .xterm-scrollable-element > .shadow.top { display: block; top: 0; left: 3px; height: 3px; width: 100%; box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset; } .xterm .xterm-scrollable-element > .shadow.left { display: block; top: 3px; left: 0; height: 100%; width: 3px; box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; } .xterm .xterm-scrollable-element > .shadow.top-left-corner { display: block; top: 0; left: 0; height: 3px; width: 3px; } .xterm .xterm-scrollable-element > .shadow.top.left { box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; }