/* ===== 基础变量（深色默认） ===== */
:root {
    color-scheme: dark;
    --bg: #101114;
    --surface: #1b1c20;
    --border: #303237;
    --text: #f4f4f6;
    --text-secondary: #9a9ca3;
    --accent: #0a84ff;
    --accent-hover: #2997ff;
    --bg-main: var(--bg);
    --bg-card: var(--surface);
    --color-primary: var(--accent);
    --brand-icon-color: var(--accent-hover);
    --protocol-badge-bg: rgba(10,132,255,.10);
    --protocol-badge-fg: var(--accent-hover);
    --danger: #ff453a;
    --success: #32d74b;
    --warning: #ffd60a;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-control: 10px;
    --radius-pill: 999px;
    --ease-micro: cubic-bezier(0.2, 0.9, 0.4, 1.1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-soft: 0 10px 30px -15px rgba(0,0,0,0.16);
    --shadow-lift: 0 18px 44px -24px rgba(0,0,0,0.22);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    --control-gap: 8px;
    --terminal-font-size: 14px;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
    --wterm-bg: #0a0a0a;
    --wterm-fg: #f4f4f6;
    --wterm-selection: rgba(10,132,255,0.24);
    --keyboard-inset: 0px;
    --stable-vh: 100vh;
    --visual-vh: var(--stable-vh, 100vh);
    --visual-offset-top: 0px;
    --vvh: 100dvh;
    --app-keyboard-inset: 0px;
    --app-visual-vh: 100vh;
    --app-visual-offset-top: 0px;
    --connection-ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ios-open: cubic-bezier(0.16, 1, 0.3, 1);
    --ios-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --connection-app-duration: 0.5s;
    --connection-shadow-idle: 0 4px 12px rgba(0,0,0,0.2);
    --connection-shadow-active: 0 40px 100px rgba(0,0,0,0.5);
    --ai-morph-spring-open: cubic-bezier(0.32, 0.72, 0, 1);
    --ai-morph-spring-close: cubic-bezier(0.4, 0, 0.6, 1);
    --ai-morph-dur-open: 0.52s;
    --ai-morph-dur-close: 0.42s;
    --ai-morph-shadow-idle: 0 4px 12px rgba(0,0,0,0.22);
    --ai-morph-shadow-active: 0 24px 80px rgba(0,0,0,0.45);
    --terminal-shelf-duration: .56s;
    --terminal-shelf-ease: cubic-bezier(.32, .72, 0, 1);
    --terminal-shelf-line-bottom: 29px;
    --terminal-shelf-line-travel: 26px;
    --terminal-shelf-rest-padding: 12px;
    --terminal-shelf-open-padding: 27px;
    --terminal-shelf-line-height: 4px;
    --smartbar-handle-height: 20px;
    --terminal-shelf-line-center-offset: calc((var(--terminal-shelf-open-padding) - var(--terminal-shelf-rest-padding)) / 2);
    --smartbar-shelf-offset: calc(var(--terminal-shelf-line-center-offset) + var(--smartbar-handle-height) / 2);
    --smartbar-panel-drop: 38px;
}

/* 浅色主题 */
@property --workspace-split-x {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 66.666%;
}

@property --workspace-split-y {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 50%;
}

@property --island-fluid-scale-x {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

@property --island-fluid-scale-y {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

@property --island-fluid-blur {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --island-w {
    syntax: '<length>';
    inherits: true;
    initial-value: 58px;
}

@property --island-h {
    syntax: '<length>';
    inherits: true;
    initial-value: 22px;
}

@property --island-dot-spread {
    syntax: '<length>';
    inherits: true;
    initial-value: 10px;
}

@property --island-dot-scale {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

@property --island-dot-opacity {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f5f7;
    --surface: #ffffff;
    --border: #dedee3;
    --text: #1d1d1f;
    --text-secondary: #6e6e73;
    --accent: #007aff;
    --accent-hover: #006bd6;
    --bg-main: var(--bg);
    --bg-card: var(--surface);
    --color-primary: var(--accent);
    --brand-icon-color: var(--accent-hover);
    --protocol-badge-bg: rgba(0,122,255,.10);
    --protocol-badge-fg: var(--accent-hover);
    --danger: #d70015;
    --success: #248a3d;
    --warning: #b26a00;
    --terminal-bg: #f5f5f7;
}

:root[data-wterm-theme="light"] {
    --wterm-bg: #f5f5f7;
    --wterm-fg: #1d1d1f;
    --wterm-selection: rgba(0,122,255,0.20);
}

:root[data-wterm-theme="default"] {
    --wterm-bg: #0a0a0a;
    --wterm-fg: #f4f4f6;
    --wterm-selection: rgba(10,132,255,0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 统一滚动条颜色，避免深色模式下出现浏览器默认浅色滚动条 */
* {
    scrollbar-color: rgba(139,148,158,0.56) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(139,148,158,0.48);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(139,148,158,0.68);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

:root[data-theme="light"] * {
    scrollbar-color: rgba(101,109,118,0.46) transparent;
}

:root[data-theme="light"] *::-webkit-scrollbar-thumb {
    background-color: rgba(101,109,118,0.38);
}

:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(101,109,118,0.56);
}

html,
body,
.app-shell,
.main-nav,
.app-main,
.view,
.login-card,
.connection-card,
.activity-panel,
.empty-card,
.settings-content,
.settings-menu,
.settings-panel,
.mini-item,
.activity-item,
.remark-md,
.remote-servers,
.remote-command,
.result-card,
.modal-backdrop,
.connection-modal,
.terminal-page,
.terminal-topbar,
.toolbar,
.file-manager,
.info-modal,
.docker-panel,
.fm-header,
.fm-toolbar,
.fm-editor-modal,
.fm-editor-code-shell,
.terminal-container,
.btn,
.btn-sm,
.tool-btn,
.icon-btn,
input,
textarea,
select {
    transition-property: background-color, background, color, border-color, box-shadow, fill, stroke, opacity, filter, transform;
    transition-duration: 320ms;
    transition-timing-function: var(--ease-smooth);
}

.theme-transitioning,
.theme-transitioning *,
.wterm-theme-transitioning,
.wterm-theme-transitioning * {
    transition-duration: 520ms !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.theme-transitioning .wterm-wrapper .term-grid,
.theme-transitioning .wterm-wrapper .term-grid *,
.wterm-theme-transitioning .wterm-wrapper .term-grid,
.wterm-theme-transitioning .wterm-wrapper .term-grid * {
    transition: none !important;
    animation: none !important;
}

body.app-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at calc(100% - 84px) 28px, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
        color-mix(in srgb, var(--bg) 12%, transparent);
    transform: scale(1.015);
}

body.app-body.theme-ripple-active::before {
    animation: appThemeRipple .54s cubic-bezier(0.16, 1, 0.3, 1);
}

#addConnectionBtn,
.connection-list [data-edit] {
    transform: translateZ(0) scale(var(--connection-press-scale, 1));
    transform-origin: center;
    will-change: transform;
    transition:
        transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        background-color 260ms ease,
        background 260ms ease,
        color 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        opacity 260ms ease,
        filter 260ms ease;
}
#addConnectionBtn.connection-pressing,
.connection-list [data-edit].connection-pressing {
    --connection-press-scale: 0.965;
    transition:
        transform 0.10s cubic-bezier(0.32, 0.72, 0, 1),
        background-color 180ms ease,
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        filter 180ms ease;
}

@keyframes appThemeRipple {
    0% { opacity: .36; transform: scale(1.018); filter: blur(8px); }
    58% { opacity: .18; filter: blur(2px); }
    100% { opacity: 0; transform: scale(1); filter: blur(0); }
}

html,
body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
}

html:has(body.app-body),
html:has(body.app-body) body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    -webkit-tap-highlight-color: transparent;
}

body:has(.terminal-page),
body:has(.rdp-page) {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--visual-vh, var(--stable-vh, 100vh));
    min-height: var(--visual-vh, var(--stable-vh, 100vh));
    padding: 0;
    overflow: hidden;
}

html.viewport-updating body:has(.terminal-page) {
    transition: height 0.20s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.20s cubic-bezier(0.16, 1, 0.3, 1);
}

body.app-body {
    display: block;
    padding: 0;
    min-height: 100vh;
    overflow: auto;
}

html:has(body.app-body) { height: auto; min-height: 100%; overflow: auto; }

html:has(body.app-body.terminal-mode),
html:has(body.app-body.terminal-mode) body,
body.app-body.terminal-mode {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* ===== 登录卡片 ===== */
.login-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow-soft);
    animation: fadeIn 0.35s var(--ease-smooth);
}
:root[data-theme="dark"] .login-card { box-shadow: 0 18px 44px -26px rgba(0,0,0,0.72); }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.login-card .logo { text-align: center; margin-bottom: 8px; font-size: 40px; }
.login-card .logo img { width: 52px; height: 52px; object-fit: contain; display: inline-block; border-radius: 14px; }
.login-card h1 { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.auth-subtitle { text-align: center; color: var(--text-secondary); margin: -12px 0 18px; font-size: 13px; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; font-size: 13px; color: var(--text-secondary); }
.captcha-box {
    display: grid;
    place-items: center;
    min-height: 0;
    margin: 2px 0 12px;
    overflow: visible;
}
.captcha-box.force-hidden { display: none !important; }
.captcha-box.loading::before {
    content: '正在加载人机验证...';
    color: var(--text-secondary);
    font-size: 12px;
}
.captcha-box.error {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(248,81,73,.35);
    border-radius: var(--radius);
    background: rgba(248,81,73,.08);
    color: var(--danger);
    font-size: 12px;
    text-align: center;
}
.remember-me { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.remember-me input { width: 14px; height: 14px; accent-color: var(--accent); }
.auth-options a { color: var(--text-secondary); font-size: 12px; text-decoration: none; }
.auth-options a:hover { color: var(--accent-hover); text-decoration: underline; }
.auth-hint { margin-top: 14px; color: var(--text-secondary); font-size: 12px; text-align: center; line-height: 1.6; }
.force-hidden { display: none !important; }
.beian-footer {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    color: #999;
    font-size: 12px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.beian-footer a {
    color: #999;
    text-decoration: none;
}

.beian-footer a:hover {
    color: #777;
    text-decoration: underline;
}

/* ===== Zephyr 管理后台第一版 ===== */
.app-shell { min-height: 100vh; background: var(--bg); color: var(--text); }
.main-nav {
    --nav-fusion-bg: color-mix(in srgb, var(--surface) 88%, transparent);
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
    background: var(--nav-fusion-bg);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}
.main-nav {
    transition:
        padding-bottom var(--terminal-shelf-duration) var(--terminal-shelf-ease),
        background .30s ease,
        box-shadow .42s ease,
        border-radius .42s ease;
}
body.terminal-mode .main-nav {
    position: sticky;
    top: 0;
    padding-bottom: 27px;
    transform: none;
    opacity: 1;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
body.terminal-mode-entering .main-nav {
    animation: none;
}
@keyframes navDockShelfDrop {
    from { padding-bottom: 12px; }
    to { padding-bottom: 27px; }
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 18px; }
.brand span { display: inline-grid; place-items: center; min-width: 24px; }
.brand img { width: 24px; height: 24px; object-fit: contain; border-radius: 7px; display: block; }
.nav-tabs, .nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-tabs { flex: 1; justify-content: center; overflow-x: auto; }
.nav-tab, .settings-tab {
    border: 1px solid transparent; background: transparent; color: var(--text-secondary);
    border-radius: var(--radius); padding: 8px 13px; cursor: pointer; font-weight: 700;
    position: relative; overflow: hidden;
    transition: transform .46s var(--ease-micro), background .32s var(--ease-smooth), color .28s ease, border-color .32s var(--ease-smooth), box-shadow .32s var(--ease-smooth); white-space: nowrap;
}
.nav-tab::after, .settings-tab::after { content: ''; position: absolute; inset: auto 18px 5px; height: 2px; border-radius: var(--radius-pill); background: var(--accent); opacity: 0; transform: scaleX(.35); transition: opacity .32s ease, transform .46s var(--ease-micro); }
.nav-tab:hover, .settings-tab:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); transform: translate3d(0, -1px, 0) scale(1.012); }
.nav-tab.active, .settings-tab.active { color: var(--accent-hover); background: var(--accent-soft-bg); border-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-tab.active::after, .settings-tab.active::after { opacity: 1; transform: scaleX(1); }
.app-main { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 26px 0 48px; }
.view { display: none; animation: fadeIn .28s ease-out; }
.view.active { display: block; }
body.terminal-mode .terminal-view.active { animation: none; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h1 { font-size: clamp(24px, 4vw, 36px); letter-spacing: -0.03em; }
.eyebrow { color: var(--accent-hover); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 4px; }
.add-btn { width: auto; min-width: 150px; }
.action-bar { display: grid; grid-template-columns: 1fr 140px 140px 150px; gap: 10px; margin-bottom: 16px; }
.search-input, .action-bar select, .settings-form input, .settings-form select, .settings-form textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); outline: none;
}
.search-input:focus, .action-bar select:focus, .settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: var(--focus-ring); }
.connection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.connection-card, .activity-panel, .empty-card, .terminal-placeholder, .settings-content, .settings-menu {
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.connection-card {
    padding: 16px;
    transform-origin: center;
    animation: connectionCardIn .34s cubic-bezier(.16,1,.3,1) both;
    transition:
        transform .52s var(--ease-micro),
        opacity .24s ease,
        filter .28s ease,
        border-color .32s var(--ease-smooth),
        box-shadow .52s var(--ease-micro);
    will-change: transform, opacity, filter;
}
.connection-card:hover { transform: translate3d(0, -2px, 0) scale(1.006); border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); box-shadow: var(--shadow-lift); }
.connection-card.deleting {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(.92);
    filter: blur(10px) saturate(.72);
    pointer-events: none;
    animation: connectionCardDelete .30s cubic-bezier(.2,.8,.2,1) both;
}
.connection-card.deleting .card-actions { opacity: .35; }
@keyframes connectionCardIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.975); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes connectionCardDelete {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate3d(0, -14px, 0) scale(.90); filter: blur(10px) saturate(.72); }
}
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.protocol-badge { padding: 4px 9px; border-radius: 999px; background: var(--protocol-badge-bg, rgba(10,132,255,.15)); color: var(--protocol-badge-fg, var(--accent-hover)); font-size: 12px; font-weight: 800; }
.last-time, .muted { color: var(--text-secondary); font-size: 12px; }
.muted-link { color: inherit; text-decoration-color: currentColor; }
.muted-link:visited { color: inherit; }
.muted-link:hover { color: var(--text); }
.connection-card h2 { font-size: 19px; margin-bottom: 5px; }
.host-line { color: var(--text-secondary); font-family: var(--font-mono); font-size: 13px; margin-bottom: 12px; }
.remark-md { min-height: 56px; padding: 10px; border-radius: var(--radius); background: var(--bg); color: var(--text-secondary); font-size: 13px; line-height: 1.55; overflow: auto; }
.remark-md code { padding: 2px 5px; border-radius: 6px; background: rgba(139,148,158,.16); color: var(--text); }
.remark-md pre { padding: 8px; border-radius: var(--radius-sm); background: #05070a; overflow: auto; margin: 4px 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; margin-bottom: 10px; }
.tag-row span { padding: 3px 8px; border-radius: 999px; background: rgba(63,185,80,.13); color: var(--success); font-size: 12px; }
.card-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.card-actions .btn { width: auto; flex: 1; padding: 8px 12px; margin-top: 0; }
.activity-panel { margin-top: 18px; padding: 16px; }
.activity-panel h2, .settings-panel h2 { font-size: 18px; margin-bottom: 12px; }
.activity-list { display: grid; gap: 8px; }
.activity-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); font-size: 13px; }
.activity-item span { color: var(--text-secondary); }
.empty-card, .terminal-placeholder { padding: 28px; text-align: center; color: var(--text-secondary); }
.browser-tabs { min-height: 50px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 10px; margin-bottom: 14px; overflow-x: auto; }

/* ===== 终端工作台：顶部智能悬浮栏 ===== */
body.terminal-mode .app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
.terminal-view.active {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--smartbar-top, 61px) - 4px);
    min-height: 0;
    overflow: hidden;
}
.app-main:has(#view-terminal.active) {
    width: calc(100% - 4px);
    height: calc(100dvh - var(--smartbar-top, 61px));
    min-height: 0;
    padding: 2px 0 0;
    overflow: hidden;
}
.terminal-smartbar {
    --smartbar-top: 61px;
    --smartbar-bar-width: 72px;
    --smartbar-bar-height: var(--terminal-shelf-line-height, 4px);
    position: fixed;
    top: calc(var(--smartbar-top) - var(--smartbar-shelf-offset));
    left: 50%;
    right: auto;
    width: 0;
    z-index: 80;
    height: 0;
    pointer-events: none;
    display: block;
    transform: translateX(-50%);
    transition: top var(--terminal-shelf-duration) var(--terminal-shelf-ease);
}
.terminal-smartbar .empty-state { display: none; }
.smartbar-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 118px;
    height: var(--smartbar-handle-height);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 999px);
    transform: translate3d(-50%, calc(-1 * var(--terminal-shelf-line-travel)), 0) scaleX(.96);
    transition:
        transform var(--terminal-shelf-duration) var(--terminal-shelf-ease),
        opacity var(--terminal-shelf-duration) linear,
        clip-path var(--terminal-shelf-duration) var(--terminal-shelf-ease);
}
.smartbar-handle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--smartbar-bar-width);
    height: var(--smartbar-bar-height);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 68%, transparent);
    box-shadow: 0 1px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.32);
    transform: translate(-50%, -50%);
    transition:
        width .30s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .30s ease;
}
body.terminal-mode .terminal-smartbar .smartbar-handle,
.terminal-smartbar.open .smartbar-handle,
.terminal-smartbar.closing .smartbar-handle {
    pointer-events: auto;
    opacity: 1;
    clip-path: inset(0 0 0 0 round 999px);
    transform: translate3d(-50%, 0, 0) scaleX(1);
}
.terminal-smartbar.open .smartbar-handle span {
    width: 66px;
    background: color-mix(in srgb, var(--accent-hover) 62%, var(--text-secondary));
    transform: translate(-50%, -50%) scaleX(.98);
}
body.terminal-mode-entering .terminal-smartbar .smartbar-handle {
    animation: none;
}
body:not(.terminal-mode) .terminal-smartbar:not(.open):not(.closing) .smartbar-handle {
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 999px);
    transform: translate3d(-50%, calc(-1 * var(--terminal-shelf-line-travel)), 0) scaleX(.96);
}
@keyframes dockBarShelfReveal {
    from { opacity: 0; clip-path: inset(0 0 100% 0 round 999px); transform: translate3d(-50%, calc(-1 * var(--terminal-shelf-line-travel)), 0) scaleX(.96); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 999px); transform: translate3d(-50%, 0, 0) scaleX(1); }
}
.smartbar-panel {
    position: absolute;
    top: var(--smartbar-panel-drop);
    left: 50%;
    width: min(max-content, calc(100vw - 36px));
    max-width: min(760px, calc(100vw - 36px));
    padding: 10px 12px 12px;
    border: 1px solid rgba(139,148,158,.24);
    border-radius: 30px;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,255,255,.30), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
    box-shadow: 0 24px 72px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset, inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(30px) saturate(1.75);
    -webkit-backdrop-filter: blur(30px) saturate(1.75);
    opacity: 0;
    pointer-events: none;
    filter: blur(14px) saturate(.9);
    transform: translate3d(-50%, -18px, 0) scale3d(.46, .20, 1);
    transform-origin: top center;
    transition:
        transform .74s cubic-bezier(.16,1,.3,1),
        opacity .34s ease,
        filter .48s ease,
        border-radius .74s cubic-bezier(.16,1,.3,1);
}
.terminal-smartbar.open .smartbar-panel {
    transform: translate3d(-50%, 0, 0) scale3d(1, 1, 1);
    opacity: 1;
    pointer-events: auto;
    filter: blur(0) saturate(1);
}
.terminal-smartbar.closing .smartbar-panel {
    pointer-events: none;
    animation: smartbarPanelMacClose .72s cubic-bezier(.16,1,.3,1) both;
}
@keyframes smartbarPanelMacClose {
    0% { border-radius: 30px; transform: translate3d(-50%, 0, 0) scale3d(1, 1, 1); opacity: 1; filter: blur(0) saturate(1); }
    100% { border-radius: 30px; transform: translate3d(-50%, -18px, 0) scale3d(.46, .20, 1); opacity: 0; filter: blur(14px) saturate(.9); }
}
.smartbar-panel .smartbar-dock {
    opacity: 0;
    transform: translateY(10px) scale(.94);
    transition: opacity .24s ease, transform .48s cubic-bezier(.18,1.18,.2,1);
}
.terminal-smartbar.open .smartbar-panel .smartbar-dock {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: .10s;
}
.smartbar-dock {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(8px, 1vw, 14px);
    min-width: 0;
    max-width: 100%;
    min-height: 108px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 18px 20px 8px;
    perspective: 900px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 20px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.smartbar-dock::-webkit-scrollbar { display: none; }
.smartbar-session,
.smartbar-add {
    --dock-scale: 1;
    --dock-lift: 0px;
    --dock-rotate: 0deg;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 6px;
    width: 82px;
    height: 88px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.72) rotateX(10deg);
    transform-origin: 50% 100%;
    transition: transform .54s cubic-bezier(.16,1,.3,1), opacity .32s ease, filter .38s ease;
    will-change: transform, opacity, filter;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}
.smartbar-add { touch-action: manipulation; }
.smartbar-session.dragging { opacity: .35; }
.smartbar-session.dock-press-armed .smartbar-session-icon {
    box-shadow: 0 18px 42px rgba(10,132,255,.20), 0 0 0 4px rgba(10,132,255,.10);
    transform: translateY(-1px) scale(1.025);
}
.smartbar-session.dock-reorder-target .smartbar-session-icon {
    transform: translateY(-7px) scale(1.12);
    border-color: rgba(10,132,255,.72);
    box-shadow: 0 24px 56px rgba(10,132,255,.22), 0 0 0 6px rgba(10,132,255,.11);
}
.smartbar-drag-ghost {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1.08);
    filter: drop-shadow(0 22px 38px rgba(0,0,0,.32));
}
.smartbar-session-icon,
.smartbar-add-icon {
    position: relative;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(139,148,158,.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.24), transparent 36%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--bg) 82%, transparent));
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .28s ease, box-shadow .42s ease, transform .68s cubic-bezier(.16,1,.3,1), border-radius .42s ease;
}
.terminal-smartbar.open .smartbar-session,
.terminal-smartbar.open .smartbar-add {
    opacity: 1;
    transform: translate3d(var(--dock-shift, 0px), var(--dock-lift), 0) scale(var(--dock-scale)) rotateZ(var(--dock-rotate));
    animation: dockItemBloom .82s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(.16s + (var(--dock-index, 0) * 56ms));
}
.terminal-smartbar.open .smartbar-session:not(.dragging),
.terminal-smartbar.open .smartbar-add { filter: blur(var(--dock-blur, 0px)); }
.smartbar-drag-ghost .smartbar-session-icon { animation: dockGhostFloat .62s cubic-bezier(.16,1,.3,1) infinite alternate; }
@keyframes dockGhostFloat { from { transform: translateY(-1px) scale(1.02); } to { transform: translateY(-7px) scale(1.08); } }
.terminal-window.dock-launching { animation: none; }
.smartbar-session:hover,
.smartbar-add:hover { --dock-scale: 1.12; --dock-lift: -7px; --dock-rotate: -.5deg; filter: saturate(1.05) brightness(1.025); }
.smartbar-session:hover + .smartbar-session,
.smartbar-session:hover + .smartbar-add,
.smartbar-add:hover + .smartbar-session { --dock-scale: 1.045; --dock-lift: -3px; }
.smartbar-session:hover .smartbar-session-icon,
.smartbar-add:hover .smartbar-add-icon { border-color: rgba(10,132,255,.58); border-radius: 21px; transform: translateY(-1px); box-shadow: 0 22px 48px rgba(0,0,0,.30), 0 0 0 5px rgba(10,132,255,.09); }
.smartbar-session.active .smartbar-session-icon { border-color: var(--accent); box-shadow: 0 16px 38px rgba(10,132,255,.22), 0 0 0 3px rgba(10,132,255,.14); animation: dockActivePulse 2.2s ease-in-out infinite; }
.smartbar-session.active::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hover); transform: translateX(-50%); box-shadow: 0 0 12px rgba(10,132,255,.72); }
.smartbar-session.minimized { opacity: .74; }
@keyframes dockItemBloom { 0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.78) rotateX(8deg); filter: blur(8px); } 64% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.025) rotateX(0); filter: blur(0); } 86% { transform: translate3d(0, 1px, 0) scale(.995); } 100% { opacity: 1; transform: translate3d(var(--dock-shift, 0px), var(--dock-lift), 0) scale(var(--dock-scale)) rotateZ(var(--dock-rotate)); filter: blur(0); } }
@keyframes dockActivePulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.025); } }
.smartbar-rendered-image {
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    flex: 0 0 auto;
}
.smartbar-session-icon .proto-dot { position: absolute; right: 7px; bottom: 7px; width: 10px; height: 10px; }
.smartbar-session-initials-img { width: 46px; height: 30px; object-fit: contain; }
.smartbar-session-label { display: flex; align-items: center; justify-content: center; width: 82px; height: 14px; overflow: hidden; }
.smartbar-session-label-img { height: 14px; max-width: 82px; object-fit: contain; }
.smartbar-session b,
.smartbar-session strong { display: none; }
.smartbar-session em { display: none; }
.smartbar-add { font-size: 0; font-weight: 600; color: var(--accent-hover); }
.smartbar-plus-img { width: 30px; height: 30px; object-fit: contain; }
.smartbar-empty { color: var(--text-secondary); font-size: 12px; padding: 0 8px; align-self: center; }
.smartbar-picker {
    position: fixed;
    left: var(--smartbar-picker-left, 18px);
    top: var(--smartbar-picker-top, 120px);
    width: min(360px, calc(100vw - 28px));
    min-height: 260px;
    max-height: min(520px, calc(100dvh - var(--smartbar-picker-top, 120px) - 18px));
    pointer-events: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(139,148,158,.30);
    border-radius: 22px;
    background:
        radial-gradient(circle at var(--smartbar-picker-origin-x, 50%) 0%, rgba(255,255,255,.24), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 72%, transparent));
    box-shadow: 0 24px 68px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(30px) saturate(1.7);
    -webkit-backdrop-filter: blur(30px) saturate(1.7);
    transform-origin: var(--smartbar-picker-origin-x, 50%) 0%;
    animation: smartbarPickerFloat .46s cubic-bezier(.16,1,.3,1) both;
}
.smartbar-picker::before {
    content: '';
    position: absolute;
    top: -7px;
    left: var(--smartbar-picker-arrow-left, 50%);
    width: 14px;
    height: 14px;
    border-left: 1px solid rgba(139,148,158,.30);
    border-top: 1px solid rgba(139,148,158,.30);
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}
@keyframes smartbarPickerFloat {
    0% { opacity: 0; transform: translate3d(0, -10px, 0) scale3d(.92, .86, 1); filter: blur(10px) saturate(.88); }
    58% { opacity: 1; transform: translate3d(0, 2px, 0) scale3d(1.018, 1.012, 1); filter: blur(0) saturate(1.05); }
    82% { transform: translate3d(0, -1px, 0) scale3d(.996, .998, 1); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); filter: blur(0) saturate(1); }
}
.smartbar-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(139,148,158,.20); }
.smartbar-picker-head strong { font-size: 13px; }
.smartbar-picker-head button { width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(139,148,158,.14); color: var(--text); cursor: pointer; }
.smartbar-picker-list { display: grid; align-content: start; gap: 6px; padding: 8px; overflow: auto; min-height: 0; }
.smartbar-picker-list button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.smartbar-picker-list button:hover { background: rgba(10,132,255,.14); border-color: rgba(10,132,255,.24); }
.smartbar-picker-list button em { grid-column: 2; color: var(--text-secondary); font-size: 11px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proto-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--success); box-shadow: 0 0 12px color-mix(in srgb, var(--success) 65%, transparent); }
.proto-dot.rdp { background: #0a84ff; box-shadow: 0 0 12px rgba(10,132,255,.7); }
.proto-dot.vnc { background: #f0883e; box-shadow: 0 0 12px rgba(240,136,62,.7); }

.terminal-workspace {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #d1d5db;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    transition: border-radius .64s cubic-bezier(.16,1,.3,1), box-shadow .64s cubic-bezier(.16,1,.3,1), transform .64s cubic-bezier(.16,1,.3,1);
}
.terminal-workspace-grid {
    --workspace-split-x: 66.666%;
    --workspace-split-y: 50%;
    display: grid;
    gap: 12px;
    padding: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(10,132,255,.13), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(63,185,80,.10), transparent 28%),
        #d1d5db;
    contain: layout paint;
    transition:
        --workspace-split-x .42s cubic-bezier(.16,1,.3,1),
        --workspace-split-y .42s cubic-bezier(.16,1,.3,1),
        grid-template-columns .42s cubic-bezier(.16,1,.3,1),
        grid-template-rows .42s cubic-bezier(.16,1,.3,1);
}
.terminal-workspace-grid.splitting {
    transition: none;
}
.terminal-workspace-grid.layout-0 { display: grid; place-items: center; }
.terminal-workspace-grid.layout-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.terminal-workspace-grid.layout-2 { grid-template-columns: var(--workspace-split-x) minmax(0, 1fr); grid-template-rows: 1fr; }
.terminal-workspace-grid.layout-2 .slot-1 { grid-column: 1; grid-row: 1; }
.terminal-workspace-grid.layout-2 .slot-2 { grid-column: 2; grid-row: 1; }
.terminal-workspace-grid.layout-3 { grid-template-columns: var(--workspace-split-x) minmax(0, 1fr); grid-template-rows: var(--workspace-split-y) minmax(0, 1fr); }
.terminal-workspace-grid.layout-3 .slot-1 { grid-row: 1 / 3; }
.terminal-workspace-grid.layout-3 .slot-2 { grid-column: 2; grid-row: 1; }
.terminal-workspace-grid.layout-3 .slot-3 { grid-column: 2; grid-row: 2; }
.terminal-window {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(139,148,158,.28);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface) 72%, #05070a);
    box-shadow: 0 18px 52px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.03);
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
    animation: terminalWindowIn .46s cubic-bezier(.16,1,.3,1);
    transition:
        transform .52s cubic-bezier(.16,1,.3,1),
        opacity .28s ease,
        filter .32s ease,
        border-color .24s ease,
        box-shadow .34s ease;
}
@keyframes terminalWindowIn {
    from { opacity: 0; transform: translateY(18px) scale(.965); filter: blur(10px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.terminal-window.active { border-color: rgba(10,132,255,.58); box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 0 3px rgba(10,132,255,.08); z-index: 2; }
.terminal-window.background { opacity: 1; filter: none; }
.terminal-window.background:hover { opacity: 1; filter: none; }
.terminal-window.closing { opacity: 0; transform: scale(.82) translateY(-12px); filter: blur(12px); pointer-events: none; }
.terminal-window.minimizing { opacity: 0; transform: scale(.72) translateY(-34px); filter: blur(14px) saturate(.72); pointer-events: none; }
.terminal-window.dock-drop-target {
    border-color: rgba(10,132,255,.86);
    box-shadow: 0 24px 72px rgba(10,132,255,.22), 0 0 0 4px rgba(10,132,255,.16);
    transform: translateY(-2px) scale(.992);
    filter: saturate(1.08) brightness(1.03);
}
.terminal-window.dock-swapping {
    animation: terminalDockSwapIn .54s cubic-bezier(.16,1,.3,1) both;
}
@keyframes terminalDockSwapIn {
    0% { opacity: 0; transform: translate3d(0, 28px, 0) scale(.90); filter: blur(16px) saturate(.82); }
    58% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.018); filter: blur(0) saturate(1.06); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) saturate(1); }
}
.terminal-window.minimized-keepalive {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
    width: var(--terminal-keepalive-width, 960px) !important;
    height: var(--terminal-keepalive-height, 600px) !important;
    min-width: var(--terminal-keepalive-width, 960px) !important;
    min-height: var(--terminal-keepalive-height, 600px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    grid-column: auto !important;
    grid-row: auto !important;
}
.terminal-window.minimized-keepalive .terminal-window-titlebar {
    display: none !important;
}
.terminal-window.minimized-keepalive .terminal-window-body,
.terminal-window.minimized-keepalive .terminal-frame {
    width: var(--terminal-keepalive-width, 960px) !important;
    height: var(--terminal-keepalive-height, 600px) !important;
    min-height: var(--terminal-keepalive-height, 600px) !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}
.terminal-window.dragging {
    z-index: 8;
    transform: translate3d(var(--drag-x, 0), var(--drag-y, 0), 0) scale(.985);
    opacity: .86;
    box-shadow: 0 34px 100px rgba(0,0,0,.5), 0 0 0 3px rgba(10,132,255,.14);
    transition: none;
    cursor: grabbing;
}
.terminal-window.dragging .terminal-window-body { filter: blur(8px) saturate(.8); opacity: .46; }
.terminal-window-dragging .terminal-window:not(.dragging) { filter: none; opacity: 1; }
.terminal-window-dragging .terminal-frame,
.terminal-workspace-splitting .terminal-frame { pointer-events: none; }
.terminal-workspace-splitting .terminal-window-body {
    filter: blur(14px) saturate(.62) brightness(.82);
    opacity: .52;
}
.terminal-window-titlebar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(139,148,158,.18);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    user-select: none;
    cursor: default;
    overflow: visible;
}
.terminal-window.dragging .terminal-window-titlebar { cursor: default; }
.terminal-grip {
    --island-x: -50%;
    --island-y: -50%;
    --island-w: 42px;
    --island-h: 22px;
    --island-radius: 999px;
    --island-fluid-scale-x: 1;
    --island-fluid-scale-y: 1;
    --island-fluid-blur: 0px;
    --island-dot-spread: 10px;
    --island-dot-scale: 1;
    --island-dot-opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--island-w);
    height: var(--island-h);
    transform:
        translate3d(var(--island-x), var(--island-y), 0)
        scale3d(var(--island-fluid-scale-x), var(--island-fluid-scale-y), 1);
    transform-origin: 50% 50%;
    border: 1px solid rgba(139,148,158,.20);
    border-radius: var(--island-radius);
    background:
        radial-gradient(circle at 50% 12%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
        color-mix(in srgb, var(--surface) 72%, rgba(0,0,0,.34));
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 14;
    touch-action: none;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(calc(18px + var(--island-fluid-blur))) saturate(1.22);
    -webkit-backdrop-filter: blur(calc(18px + var(--island-fluid-blur))) saturate(1.22);
    box-shadow:
        0 3px 10px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
    clip-path: inset(0 round var(--island-radius));
    transition:
        border-color .24s ease,
        background .24s ease,
        color .18s ease,
        box-shadow .36s ease,
        opacity .12s ease,
        backdrop-filter .24s ease,
        -webkit-backdrop-filter .24s ease;
    will-change: width, height, transform, clip-path, border-radius, box-shadow, background, filter;
    contain: paint;
}
.terminal-grip::before {
    content: '';
    position: absolute;
    inset: -14px;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
    opacity: .68;
    filter: blur(8px);
    transform: scale3d(.72, .68, 1);
    pointer-events: none;
}
.terminal-grip::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -2;
    border-radius: inherit;
    background: inherit;
    opacity: .84;
    filter: blur(var(--island-fluid-blur));
    transform: scale3d(1.02, .92, 1);
    pointer-events: none;
}
.terminal-grip span,
.terminal-grip span::before,
.terminal-grip span::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    display: block;
    box-shadow: 0 0 9px rgba(255,255,255,.08);
    transition:
        transform .28s cubic-bezier(.34,1.56,.64,1),
        opacity .18s ease,
        filter .22s ease,
        background-color .18s ease;
    will-change: transform, opacity, filter;
}
.terminal-grip span {
    position: relative;
    transform-origin: center center;
    transform: scale(var(--island-dot-scale));
    opacity: var(--island-dot-opacity);
    animation: terminalIslandDotBreath 2.2s cubic-bezier(.22,1,.36,1) infinite;
}
.terminal-grip span::before,
.terminal-grip span::after {
    position: absolute;
    top: 0;
    transform-origin: center center;
}
.terminal-grip span::before { left: calc(-1 * var(--island-dot-spread)); }
.terminal-grip span::after { left: var(--island-dot-spread); }
.terminal-grip:hover {
    color: var(--text);
    border-color: rgba(10,132,255,.36);
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
        color-mix(in srgb, var(--surface) 78%, rgba(10,132,255,.10));
    box-shadow:
        0 6px 16px rgba(0,0,0,.20),
        0 0 0 3px rgba(10,132,255,.07);
}
.terminal-grip.island-pressing {
    animation: terminalIslandTapBounce .20s cubic-bezier(0.32, 0.72, 0, 1) both;
    transition:
        background .14s ease,
        box-shadow .14s ease;
}
.terminal-window-titlebar.menu-open .terminal-grip.island-pressing {
    --island-fluid-scale-x: .98;
    --island-fluid-scale-y: .92;
}
.terminal-grip:hover span::before { transform: translateX(1.5px); }
.terminal-grip:hover span::after { transform: translateX(-1.5px); }
.terminal-window-titlebar.menu-open .terminal-grip {
    --island-w: 42px;
    --island-h: 22px;
    --island-fluid-scale-x: 1;
    --island-fluid-scale-y: 1;
    --island-dot-spread: 10px;
    --island-dot-scale: 1;
    --island-dot-opacity: 1;
    --island-fluid-blur: 0px;
    color: var(--text);
    pointer-events: none;
    animation: terminalIslandSourceMelt .24s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.terminal-window-titlebar.menu-open .terminal-grip span {
    opacity: 1;
    transform: none;
    transition: opacity .08s ease;
}
.terminal-window-titlebar.menu-open .terminal-grip span::before,
.terminal-window-titlebar.menu-open .terminal-grip span::after {
    filter: blur(6px);
}
.terminal-window.dragging .terminal-grip { cursor: grabbing; }
.terminal-window-titlebar strong { font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-window-titlebar em { display: none; }
.terminal-window-more {
    margin-left: auto;
    width: 26px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: transform .26s cubic-bezier(.18,1.2,.2,1), background .18s ease, color .18s ease;
}
.terminal-window-more:hover { color: var(--text); background: rgba(10,132,255,.14); transform: scale(1.08); }
.terminal-window-menu {
    position: absolute;
    top: calc(50% + 16px);
    left: var(--terminal-window-menu-left, calc(50% - 92px));
    right: auto;
    z-index: 16;
    width: min(var(--terminal-island-menu-width, 260px), calc(100% - 16px));
    height: var(--terminal-island-menu-height, auto);
    max-height: none;
    display: grid;
    grid-auto-rows: minmax(38px, auto);
    gap: 7px;
    padding: 12px 10px 14px;
    border: 0 solid transparent;
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface) 72%, rgba(255,255,255,.18));
    box-shadow: none;
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    opacity: 0;
    pointer-events: none;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    filter: none;
    clip-path: none;
    transition:
        top .52s cubic-bezier(0.32, 0.72, 0, 1),
        left .52s cubic-bezier(0.32, 0.72, 0, 1),
        width .52s cubic-bezier(0.32, 0.72, 0, 1),
        height .52s cubic-bezier(0.32, 0.72, 0, 1),
        border-radius .52s cubic-bezier(0.32, 0.72, 0, 1),
        opacity .12s ease;
    will-change: top, left, width, height, border-radius, opacity;
    contain: paint;
}
.terminal-window-menu::before {
    content: none;
}
.terminal-window-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    box-shadow:
        -10px 0 0 color-mix(in srgb, var(--text-secondary) 72%, transparent),
        10px 0 0 color-mix(in srgb, var(--text-secondary) 72%, transparent),
        0 0 9px rgba(255,255,255,.08);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    filter: blur(0);
    pointer-events: none;
}
.terminal-window-titlebar.menu-open.menu-animating .terminal-window-menu::after {
    animation: terminalIslandSourceDotsToPanel .18s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.terminal-window-titlebar.menu-closing.menu-animating .terminal-window-menu::after {
    animation: terminalIslandSourceDotsReturn .24s cubic-bezier(0.4, 0, 0.6, 1) both;
}
.terminal-window-titlebar.menu-open:not(.menu-animating) .terminal-window-menu::after,
.terminal-window-titlebar.menu-closing:not(.menu-animating) .terminal-window-menu::after {
    opacity: 0;
    animation: none;
}
:root[data-theme="light"] .terminal-window-menu {
    border-color: transparent;
    background: rgba(255,255,255,.42);
    color: #1f2328;
    box-shadow: none;
    backdrop-filter: blur(30px) saturate(1.7);
    -webkit-backdrop-filter: blur(30px) saturate(1.7);
}
:root[data-theme="light"] .terminal-window-menu::before {
    content: none;
}
.terminal-window-titlebar.menu-open .terminal-window-menu {
    opacity: 1;
    pointer-events: auto;
    border-radius: var(--terminal-island-radius, 22px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46)),
        rgba(245,248,252,.62);
    clip-path: none;
    box-shadow: 0 18px 42px rgba(31,35,40,.075);
}
:root[data-theme="light"] .terminal-window-titlebar.menu-open .terminal-window-menu {
    background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.52)),
        rgba(247,249,252,.64);
}
:root[data-theme="dark"] .terminal-window-titlebar.menu-open .terminal-window-menu {
    background:
        linear-gradient(180deg, rgba(42,44,48,.72), rgba(24,26,30,.58)),
        rgba(24,26,30,.60);
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.terminal-window-titlebar.menu-closing .terminal-window-menu {
    opacity: 1;
    pointer-events: none;
    border-radius: var(--terminal-island-radius, var(--terminal-island-collapsed-radius, 11px));
    background: color-mix(in srgb, var(--surface) 72%, rgba(255,255,255,.18));
    clip-path: none;
    box-shadow: none;
    transition:
        top .42s cubic-bezier(0.4, 0, 0.6, 1),
        left .42s cubic-bezier(0.4, 0, 0.6, 1),
        width .42s cubic-bezier(0.4, 0, 0.6, 1),
        height .42s cubic-bezier(0.4, 0, 0.6, 1),
        border-radius .42s cubic-bezier(0.4, 0, 0.6, 1),
        background .16s ease-in,
        opacity .01s linear .42s;
}
:root[data-theme="light"] .terminal-window-titlebar.menu-closing .terminal-window-menu {
    background: rgba(255,255,255,.42);
}
:root[data-theme="dark"] .terminal-window-titlebar.menu-closing .terminal-window-menu {
    background: color-mix(in srgb, var(--surface) 72%, rgba(0,0,0,.34));
}
.terminal-window-titlebar.menu-closing .terminal-window-menu button {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(.94);
    filter: blur(3px);
    transition-delay: 0ms;
}
.terminal-window-titlebar.menu-closing .terminal-grip {
    opacity: 1;
    pointer-events: auto;
    animation: terminalIslandDotsReturn .30s cubic-bezier(.34,1.56,.64,1) .12s both;
}
.terminal-window-titlebar.menu-closing .terminal-grip span {
    opacity: 1;
    animation: terminalIslandDotBreath 2.2s cubic-bezier(.22,1,.36,1) infinite;
}
.terminal-window-menu button {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.42);
    color: rgba(31,35,40,.86);
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translate3d(0, 4px, 0) scale(.96);
    filter: blur(3px);
    transition: opacity .12s ease .42s, transform .18s cubic-bezier(.22,1,.36,1) .42s, filter .12s ease .42s;
}
:root[data-theme="dark"] .terminal-window-menu button {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
}
:root[data-theme="light"] .terminal-window-menu button {
    color: rgba(31,35,40,.84);
    background: rgba(255,255,255,.42);
}
.terminal-window-titlebar.menu-open .terminal-window-menu button {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition:
        opacity .18s ease,
        transform .30s cubic-bezier(.22,1,.36,1),
        filter .18s ease,
        background .16s ease,
        color .16s ease;
    transition-delay: calc(.08s + (var(--item-index, 0) * 20ms));
}
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(1) { --item-index: 0; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(2) { --item-index: 1; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(3) { --item-index: 2; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(4) { --item-index: 3; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(5) { --item-index: 4; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(6) { --item-index: 5; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(7) { --item-index: 6; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(8) { --item-index: 7; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(9) { --item-index: 8; }
.terminal-window-menu button:hover { background: rgba(255,255,255,.12); transform: translate3d(0, -1px, 0) scale(1.015); }
:root[data-theme="light"] .terminal-window-menu button:hover { background: rgba(255,255,255,.66); }
.terminal-window-titlebar.menu-open ~ .terminal-window-body .terminal-frame,
.terminal-window-titlebar.menu-open ~ .terminal-window-body .terminal-placeholder {
    pointer-events: none;
}
@keyframes terminalIslandDotBreath {
    0%, 100% { transform: scale(var(--island-dot-scale)); filter: blur(0); }
    50% { transform: scale(calc(var(--island-dot-scale) * 1.08)); filter: blur(.15px); }
}
@keyframes terminalIslandTapBounce {
    0% {
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-fluid-blur: 0px;
        transform: translate3d(var(--island-x), var(--island-y), 0) scale3d(1, 1, 1);
    }
    38% {
        --island-fluid-scale-x: .92;
        --island-fluid-scale-y: .86;
        --island-dot-spread: 8px;
        --island-dot-scale: .88;
        --island-fluid-blur: .7px;
        transform: translate3d(var(--island-x), var(--island-y), 0) scale3d(.94, .94, 1);
    }
    72% {
        --island-fluid-scale-x: 1.035;
        --island-fluid-scale-y: 1.02;
        --island-dot-spread: 10.5px;
        --island-dot-scale: 1.04;
        --island-fluid-blur: 0px;
        transform: translate3d(var(--island-x), var(--island-y), 0) scale3d(1.025, 1.025, 1);
    }
    100% {
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-fluid-blur: 0px;
        transform: translate3d(var(--island-x), var(--island-y), 0) scale3d(1, 1, 1);
    }
}
@keyframes terminalIslandSourceDotsToPanel {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
    55% { opacity: .46; transform: translate(-50%, -50%) scale(.72); filter: blur(1.2px); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.48); filter: blur(4px); }
}
@keyframes terminalIslandSourceDotsReturn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.48); filter: blur(4px); }
    45% { opacity: .42; transform: translate(-50%, -50%) scale(.72); filter: blur(1.2px); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}
@keyframes terminalIslandSourceMelt {
    0% {
        opacity: 1;
        --island-w: 42px;
        --island-h: 22px;
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-dot-opacity: 1;
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-fluid-blur: 0px;
    }
    100% {
        opacity: 0;
        --island-w: 42px;
        --island-h: 22px;
        --island-dot-spread: 5px;
        --island-dot-scale: .84;
        --island-dot-opacity: .18;
        --island-fluid-scale-x: .965;
        --island-fluid-scale-y: .92;
        --island-fluid-blur: .8px;
    }
}
@keyframes terminalIslandDynamicMorph {
    0% {
        --island-w: 42px;
        --island-h: 22px;
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-dot-opacity: 1;
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-fluid-blur: 0px;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
    }
    28% {
        --island-w: 40px;
        --island-h: 21px;
        --island-dot-spread: 2px;
        --island-dot-scale: .62;
        --island-dot-opacity: .76;
        --island-fluid-scale-x: .88;
        --island-fluid-scale-y: .86;
        --island-fluid-blur: 1.6px;
        border-radius: 999px;
        clip-path: inset(0 2px round 999px);
    }
    48% {
        --island-w: 74px;
        --island-h: 25px;
        --island-dot-spread: 0px;
        --island-dot-scale: .34;
        --island-dot-opacity: .34;
        --island-fluid-scale-x: 1.05;
        --island-fluid-scale-y: .82;
        --island-fluid-blur: 4px;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
    }
    72% {
        --island-w: 222px;
        --island-h: 35px;
        --island-dot-spread: 0px;
        --island-dot-scale: .22;
        --island-dot-opacity: .08;
        --island-fluid-scale-x: 1.035;
        --island-fluid-scale-y: 1.06;
        --island-fluid-blur: 2px;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
    }
    86% {
        --island-w: 206px;
        --island-h: 33px;
        --island-fluid-scale-x: .985;
        --island-fluid-scale-y: .97;
        --island-fluid-blur: .8px;
    }
    100% {
        --island-w: 214px;
        --island-h: 34px;
        --island-dot-spread: 0px;
        --island-dot-scale: .18;
        --island-dot-opacity: .02;
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-fluid-blur: 0px;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
    }
}
@keyframes terminalIslandDotMelt {
    0% { opacity: 1; transform: scale(1); filter: blur(0); }
    28% { opacity: .76; transform: scale(.62); filter: blur(.6px); }
    48% { opacity: .34; transform: scale(.34); filter: blur(3px); }
    100% { opacity: .02; transform: scale(.18); filter: blur(7px); }
}
@keyframes terminalIslandFluidOpen {
    0% {
        opacity: .68;
        border-radius: 999px;
        clip-path: inset(0 44% 86% 44% round 999px);
        transform:
            translate3d(var(--island-start-dx, 0px), 0, 0)
            scaleX(max(var(--island-start-scale-x, .34), .28))
            scaleY(max(var(--island-start-scale-y, .18), .14));
        filter: blur(3px) saturate(1);
    }
    12% {
        opacity: .74;
        border-radius: 999px;
        clip-path: inset(0 40% 80% 40% round 999px);
        transform:
            translate3d(calc(var(--island-start-dx, 0px) * .86), 0, 0)
            scaleX(.42)
            scaleY(.24);
        filter: blur(4px) saturate(1);
    }
    24% {
        opacity: .90;
        border-radius: 999px;
        clip-path: inset(0 29% 68% 29% round 999px);
        transform:
            translate3d(calc(var(--island-start-dx, 0px) * .68), 0, 0)
            scaleX(.66)
            scaleY(.38);
        filter: blur(6px) saturate(1.02);
    }
    44% {
        opacity: 1;
        border-radius: 28px;
        clip-path: inset(0 2% 10% 2% round 28px);
        transform:
            translate3d(calc(var(--island-start-dx, 0px) * .32), 0, 0)
            scaleX(1.025)
            scaleY(.92);
        filter: blur(3px) saturate(1.14);
    }
    68% {
        opacity: 1;
        border-radius: 21px;
        clip-path: inset(0 round 21px);
        transform: translate3d(0, 1px, 0) scaleX(.995) scaleY(1.025);
        filter: blur(0) saturate(1.10);
    }
    100% {
        opacity: 1;
        border-radius: 22px;
        clip-path: inset(0 round 22px);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}
@keyframes terminalIslandFluidClose {
    0% {
        opacity: 1;
        border-radius: 22px;
        clip-path: inset(0 round 22px);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
    46% {
        opacity: .86;
        border-radius: 999px;
        clip-path: inset(0 18% 54% 18% round 999px);
        transform: translate3d(calc(var(--island-start-dx, 0px) * .18), 0, 0) scaleX(.78) scaleY(.34);
        filter: blur(4px) saturate(1.02);
    }
    100% {
        opacity: 0;
        border-radius: 999px;
        clip-path: inset(0 44% 86% 44% round 999px);
        transform:
            translate3d(var(--island-start-dx, 0px), 0, 0)
            scaleX(max(var(--island-start-scale-x, .34), .28))
            scaleY(max(var(--island-start-scale-y, .18), .14));
        filter: blur(4px) saturate(1);
    }
}
@keyframes terminalIslandDotsReturn {
    0% {
        --island-dot-spread: 5px;
        --island-dot-scale: .84;
        --island-dot-opacity: .18;
        --island-fluid-scale-x: .965;
        --island-fluid-scale-y: .92;
        --island-fluid-blur: .8px;
        opacity: 0;
    }
    100% {
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-dot-opacity: 1;
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-fluid-blur: 0px;
        opacity: 1;
    }
}
@keyframes terminalIslandLiquidGlow {
    0% { opacity: .72; transform: scale3d(.24, .70, 1); filter: blur(18px); }
    45% { opacity: .92; transform: scale3d(1.10, .86, 1); filter: blur(13px); }
    72% { opacity: .50; transform: scale3d(1.02, 1.06, 1); filter: blur(12px); }
    100% { opacity: 0; transform: scale3d(1, 1, 1); filter: blur(16px); }
}
@keyframes terminalIslandBreath {
    0%, 100% {
        transform: translate3d(var(--island-x), calc(var(--island-y) - .2px), 0);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            inset 0 -10px 24px rgba(0,0,0,.10),
            0 14px 34px rgba(0,0,0,.28),
            0 0 0 1px rgba(255,255,255,.07);
    }
    50% {
        transform: translate3d(var(--island-x), calc(var(--island-y) + .3px), 0);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            inset 0 -9px 22px rgba(0,0,0,.09),
            0 15px 36px rgba(0,0,0,.30),
            0 0 0 1px rgba(255,255,255,.08);
    }
}
.terminal-window-body { flex: 1; min-height: 0; overflow: hidden; transition: filter .28s ease, opacity .28s ease; }
.terminal-window-body .terminal-frame,
.terminal-window .terminal-frame.active {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: var(--bg);
}
.terminal-window-body .terminal-placeholder.active { display: grid; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
.workspace-splitter {
    --splitter-bar-bg: color-mix(in srgb, var(--surface) 88%, transparent);
    --splitter-bar-border: rgba(139,148,158,.42);
    --splitter-handle: rgba(107,114,128,.88);
    --splitter-handle-active: rgba(75,85,99,.96);
    position: absolute;
    z-index: 9;
    border-radius: 0;
    background: var(--splitter-bar-bg);
    opacity: 1;
    transition:
        background-color .18s ease,
        border-color .18s ease;
    touch-action: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -1px 0 rgba(0,0,0,.08);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
}
.terminal-workspace.splitting .workspace-splitter,
.workspace-splitter.dragging {
    transition: none !important;
}
.workspace-splitter:hover,
.terminal-workspace.splitting .workspace-splitter {
    --splitter-handle: var(--splitter-handle-active);
}
.workspace-splitter::before,
.workspace-splitter::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.workspace-splitter::before {
    z-index: 1;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
}
.workspace-splitter::after {
    z-index: 2;
    border-radius: 999px;
    background: var(--splitter-handle);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
    transition: background .20s ease;
}
.workspace-splitter.vertical {
    top: 0;
    bottom: 0;
    left: calc(var(--workspace-split-x) + 6px);
    width: 12px;
    border-left: 1px solid var(--splitter-bar-border);
    border-right: 1px solid var(--splitter-bar-border);
    transform: translateX(-50%);
    cursor: col-resize;
}
.workspace-splitter.vertical::before { width: 2px; height: 100%; }
.workspace-splitter.vertical::after {
    width: 5px;
    height: min(74px, 24vh);
}
.workspace-splitter.horizontal {
    left: calc(var(--workspace-split-x) + 12px);
    right: 0;
    top: calc(var(--workspace-split-y) + 6px);
    height: 12px;
    border-top: 1px solid var(--splitter-bar-border);
    border-bottom: 1px solid var(--splitter-bar-border);
    transform: translateY(-50%);
    cursor: row-resize;
}
.workspace-splitter.horizontal::before { width: 100%; height: 2px; }
.workspace-splitter.horizontal::after {
    width: min(74px, 24vw);
    height: 5px;
}
.workspace-splitter.arming::after,
.workspace-splitter.dragging::after,
.terminal-workspace.splitting .workspace-splitter::after {
    background: var(--splitter-handle-active);
}
.terminal-workspace.custom-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.terminal-workspace.compact {
    min-height: calc(100dvh - 12px);
    border-radius: var(--radius);
}
.terminal-workspace.compact.keyboard-open {
    min-height: 0 !important;
    overflow: hidden;
}
.terminal-workspace.compact.keyboard-open .terminal-window,
.terminal-workspace.compact.keyboard-open .terminal-window-body,
.terminal-workspace.compact.keyboard-open .terminal-frame {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
}
.terminal-workspace.compact.keyboard-open .terminal-window {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.terminal-workspace.compact.keyboard-open .terminal-window-body {
    flex: 1 1 auto;
    overflow: hidden;
}
.terminal-workspace-grid.compact.layout-1,
.terminal-workspace-grid.compact.layout-2,
.terminal-workspace-grid.compact.layout-3 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.terminal-workspace-grid.compact .terminal-window { grid-column: 1 !important; grid-row: 1 !important; min-height: 0; }
.terminal-workspace-grid.compact.custom-fullscreen .terminal-window,
.terminal-workspace-grid.compact.custom-fullscreen .terminal-window-body,
.terminal-workspace-grid.compact.custom-fullscreen .terminal-frame {
    height: 100%;
    min-height: 0;
}
body.terminal-custom-fullscreen-open {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}
body.terminal-custom-fullscreen-open .main-nav {
    display: none !important;
}
.terminal-workspace-grid.compact .workspace-splitter { display: none; }
.terminal-workspace.fullscreen-transitioning { transform: scale(.992); box-shadow: 0 28px 88px rgba(0,0,0,.36); }
.terminal-frame { display: none; width: 100%; height: 720px; border: 0; background: var(--bg); }
.terminal-frame.active { display: block; }
.terminal-workspace .terminal-placeholder { min-height: 720px; display: none; place-items: center; }
.terminal-workspace .terminal-placeholder.active, .terminal-workspace > .terminal-placeholder:only-child { display: grid; }
.terminal-frame:fullscreen, .terminal-workspace:fullscreen, .terminal-window:fullscreen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}
.terminal-frame:fullscreen,
.terminal-window:fullscreen .terminal-frame {
    display: block;
}
.terminal-window:fullscreen {
    background: var(--bg);
    border: 0;
    box-shadow: none;
}
.terminal-window:fullscreen .terminal-window-titlebar {
    min-height: 30px;
}
.terminal-window:fullscreen .terminal-window-body,
.terminal-window:fullscreen .terminal-frame {
    width: 100%;
    height: 100%;
}
.terminal-workspace:fullscreen .terminal-frame.active { width: 100%; height: 100%; }
.terminal-workspace:fullscreen.keyboard-open {
    height: var(--app-visual-vh) !important;
    min-height: var(--app-visual-vh) !important;
    max-height: var(--app-visual-vh) !important;
    transform: translate3d(0, var(--app-visual-offset-top), 0);
}
.terminal-workspace.keyboard-settling,
.terminal-workspace.keyboard-settling * {
    transition: none !important;
}
.terminal-workspace:fullscreen.keyboard-open .terminal-frame.active {
    height: 100% !important;
    max-height: 100% !important;
}
.terminal-fullscreen-loader {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background:
        radial-gradient(circle at 50% 42%, rgba(10,132,255,.18), transparent 34%),
        color-mix(in srgb, #05070a 82%, transparent);
    color: #f4f4f6;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.015);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    transition: opacity .44s ease, transform .64s cubic-bezier(.16,1,.3,1);
}
.terminal-workspace.fullscreen-loading .terminal-fullscreen-loader {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.terminal-fullscreen-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(139,148,158,.32);
    border-top-color: var(--accent-hover);
    box-shadow: 0 0 28px rgba(10,132,255,.32);
    animation: spin .82s linear infinite;
}
.terminal-fullscreen-loader span {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(13,17,23,.58);
    border: 1px solid rgba(139,148,158,.24);
    font-size: 13px;
}
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-title-row h2 { margin: 0; }
.empty-state { color: var(--text-secondary); font-size: 14px; padding: 6px; }
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.settings-menu {
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.settings-tab { text-align: left; border-radius: var(--radius); }
.settings-content { padding: 18px; }
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: fadeIn .24s ease-out; }
.settings-form { display: grid; gap: 10px; max-width: 420px; margin-bottom: 14px; }
.settings-form .form-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 12px;
}
.settings-form .form-actions .btn {
    width: 100%;
    min-height: 46px;
    margin: 0 !important;
}
.brand-upload-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; }
.brand-icon-preview { width: 58px; height: 58px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); display: grid; place-items: center; font-size: 30px; overflow: hidden; }
.brand-icon-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.inline-form { max-width: none; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); align-items: end; }
.check-line { color: var(--text-secondary); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.check-line input { width: auto; }
.mini-list { display: grid; gap: 8px; margin: 10px 0 20px; }
.mini-item { display: grid; grid-template-columns: 1fr 1.5fr auto auto; gap: 8px; align-items: center; padding: 10px; border-radius: var(--radius); background: var(--bg); font-size: 13px; }
.mini-item span { color: var(--text-secondary); }
.mini-item button { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 6px 9px; cursor: pointer; }
.remote-layout { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: 14px; align-items: start; }
.remote-servers, .remote-command, .result-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px; }
.remote-servers { display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.server-check { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; padding: 10px; border-radius: var(--radius); background: var(--bg); cursor: pointer; border: 1px solid transparent; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.server-check:hover { border-color: rgba(10,132,255,.32); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.server-check:has(input:checked) { border-color: rgba(10,132,255,.58); background: rgba(10,132,255,.12); }
.server-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.server-check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.server-check em { grid-column: 2; color: var(--text-secondary); font-style: normal; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-command { display: grid; gap: 10px; }
.remote-command label { color: var(--text-secondary); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.remote-command textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.remote-command input, .remote-command textarea { width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: var(--font-mono); outline: none; }
.remote-command input:focus, .remote-command textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.12); }
.remote-command .btn { justify-self: end; width: auto; min-width: 140px; }
.remote-results { display: grid; gap: 12px; margin-top: 14px; }
.result-card h3 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 16px; margin-bottom: 8px; }
.result-card h3 span { color: var(--text-secondary); font-size: 12px; }
.result-card.ok { border-color: rgba(63,185,80,.35); }
.result-card.fail { border-color: rgba(248,81,73,.38); }
.result-card pre { background: var(--bg); border-radius: var(--radius); padding: 10px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; }
.result-card .stderr, .error-text { color: var(--danger); }
.settings-form .btn { margin-top: 0; }
body.disable-interaction {
    pointer-events: none;
    user-select: none;
}
body.app-body::after {
    content: none;
    display: none;
}
body.connection-home-blur .app-shell {
    transform: scale(.92) translateZ(0);
    filter: blur(12px) brightness(.5);
}
body.connection-transition-opening .app-shell,
body.connection-transition-closing .app-shell {
    transition:
        transform var(--connection-app-duration) var(--connection-ios-spring),
        filter var(--connection-app-duration) ease-out;
    will-change: transform, filter;
}
.connection-transition-layer {
    position: fixed;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 30%),
        radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--success) 6%, transparent), transparent 28%),
        var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--connection-shadow-idle);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: top, left, width, height, border-radius, box-shadow;
    contain: layout paint style;
}
.connection-transition-layer::before,
.connection-transition-layer::after {
    content: none;
    display: none;
}
.connection-transition-source-visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    transform: scale(1);
    transition: opacity .15s ease, transform .18s ease;
    pointer-events: none;
}
.connection-transition-layer.source-visual-hidden .connection-transition-source-visual {
    opacity: 0;
    transform: scale(.94);
    transition: opacity .15s ease, transform .18s ease;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: none;
    place-items: center;
    padding: 18px;
    background: transparent;
    opacity: 1;
    pointer-events: none;
}
.modal-backdrop.show {
    display: grid;
}
.modal-backdrop.show.app-visible {
    pointer-events: auto;
}
.modal-backdrop.closing {
    display: grid;
    pointer-events: none;
}
.connection-modal {
    width: min(620px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 18px;
    box-shadow: none;
    opacity: 0;
    transform: none;
    filter: none;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 1, 1);
    will-change: opacity;
}
.modal-backdrop.show.app-visible .connection-modal {
    opacity: 1;
    transition: opacity 0.3s ease-out 0.1s;
}
.modal-backdrop.closing .connection-modal {
    opacity: 0;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 1, 1);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-field button { position: absolute; right: 8px; bottom: 7px; border: 0; background: transparent; cursor: pointer; font-size: 16px; }
.link-btn { margin-top: 8px; border: 0; background: transparent; color: var(--accent-hover); font-weight: 700; cursor: pointer; padding: 4px 0; }
.field-hint { margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.advanced-route-panel {
    margin: 4px 0 16px;
}
.advanced-route-panel h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--text);
}
.advanced-route-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 16px;
}
.advanced-route-label {
    display: block;
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}
.route-type-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.route-type-tab {
    min-height: 46px;
    border: 0;
    border-right: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    font-size: 15px;
    font-family: var(--font-sans);
}
.route-type-tab:last-child { border-right: 0; }
.route-type-tab.active {
    background: color-mix(in srgb, var(--accent) 82%, #1f7fb8);
    color: #fff;
}
.route-type-tab:hover:not(.active) {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.route-proxy-config,
.jump-route-config {
    display: grid;
    gap: 10px;
}
.route-proxy-config select,
.jump-route-row select {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.route-proxy-config select:focus,
.jump-route-row select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,.12), 0 2px 8px rgba(0,0,0,.10);
}
.jump-route-list {
    display: grid;
    gap: 14px;
}
.jump-route-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 84%, var(--bg));
}
.jump-route-row label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}
.jump-route-remove {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}
.jump-route-remove:hover {
    background: rgba(248,81,73,.12);
    color: var(--danger);
}
.add-jump-route-btn {
    width: 100%;
    min-height: 54px;
    border: 1px dashed var(--accent);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-hover);
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-sans);
}
.add-jump-route-btn:hover {
    background: rgba(10,132,255,.10);
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.modal-actions .btn { width: auto; min-width: 110px; margin-top: 0; }
.connection-test-latency {
    min-height: 20px;
    margin-right: auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.connection-test-latency[data-state="pending"] { color: var(--accent-hover); }
.connection-test-latency[data-state="success"] { color: var(--success); }
.connection-test-latency[data-state="error"] { color: var(--danger); }
body.app-body > .toast { position: fixed; top: 72px; right: 18px; z-index: 120; pointer-events: none; }
body.app-body > .toast.show { opacity: 1; transform: translate3d(0,0,0) scale(1); }

@media (max-width: 760px) and (hover: none) and (pointer: coarse) {
    .main-nav { align-items: flex-start; flex-wrap: wrap; padding: 10px; }
    .nav-tabs { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .app-main { width: min(100% - 20px, 1180px); padding-top: 18px; }
    .section-head { align-items: stretch; flex-direction: column; }
    .add-btn { width: 100%; }
    .action-bar { grid-template-columns: 1fr; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-menu {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .settings-menu .settings-tab {
        white-space: nowrap;
        min-width: max-content;
    }
    .settings-content {
        padding: 14px;
        overflow-wrap: anywhere;
    }
    .jump-route-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }
    .jump-route-row label,
    .jump-route-row select {
        grid-column: 1 / -1;
    }
    .settings-form,
    .inline-form {
        max-width: none;
        grid-template-columns: 1fr;
    }
    .mini-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        align-items: stretch;
    }
    .mini-item b,
    .mini-item span {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .mini-item button {
        width: 100%;
        justify-self: stretch;
        min-height: 34px;
    }
    .modal-actions { flex-direction: column-reverse; align-items: stretch; }
    .modal-actions .btn { width: 100%; }
    .connection-test-latency { width: 100%; margin-right: 0; text-align: center; }
    .activity-item { flex-direction: column; }
    .modal-backdrop { align-items: start; place-items: start center; overflow-y: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
    .connection-modal { max-height: none; margin: 10px 0 calc(24px + env(safe-area-inset-bottom)); overflow: visible; border-radius: var(--radius-lg); }
    .terminal-view.active { min-height: calc(100dvh - 2px); }
    .terminal-workspace { min-height: calc(100dvh - 2px); }
    .terminal-frame { height: 100%; min-height: 0; }
    .remote-layout { grid-template-columns: 1fr; gap: 12px; }
    .remote-servers {
        max-height: 260px;
        padding: 10px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .remote-command { padding: 12px; }
    .remote-command textarea { min-height: 150px; }
    .remote-command .btn { justify-self: stretch; width: 100%; min-height: 42px; }
    .result-card h3 { flex-direction: column; gap: 4px; }
    .terminal-smartbar {
        --smartbar-panel-height: 138px;
        padding-inline: 14px;
    }
    .smartbar-panel {
        width: max-content;
        max-width: min(100vw - 28px, 720px);
        padding: 10px 12px 12px;
        border-radius: 28px;
    }
    .terminal-smartbar.open .smartbar-panel {
        clip-path: none;
    }
    .smartbar-dock {
        justify-content: flex-start;
        min-height: 92px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px 14px 4px;
        gap: 8px;
        scroll-padding-inline: 14px;
    }
    .smartbar-session,
    .smartbar-add {
        width: 68px;
        height: 78px;
    }
    .smartbar-session-icon,
    .smartbar-add-icon {
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }
    .smartbar-session-label { width: 68px; }
    .smartbar-session-label-img { max-width: 68px; height: 13px; }
    .smartbar-session:hover,
    .smartbar-add:hover {
        --dock-scale: 1.08;
        --dock-lift: -6px;
    }
}

.theme-btn-login {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
    z-index: 2;
}
.theme-btn-login:hover { background: var(--bg); border-color: var(--text-secondary); }

/* 表单元素 */
.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-mono);
    transition: border-color .32s var(--ease-smooth), box-shadow .32s var(--ease-smooth), background .32s var(--ease-smooth);
    user-select: text;
    -webkit-user-select: text;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow: var(--focus-ring);
}
.form-group textarea { resize: vertical; min-height: 80px; font-size: 12px; line-height: 1.5; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.form-row .form-group.port-group { flex: 0 0 90px; min-width: 70px; }

/* 按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--control-gap);
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: transform .46s var(--ease-micro), background .32s var(--ease-smooth), border-color .32s var(--ease-smooth), box-shadow .46s var(--ease-micro), color .28s ease;
    letter-spacing: 0;
    font-family: var(--font-sans);
    transform: translateZ(0);
    will-change: transform, box-shadow;
}
.btn:hover { transform: translate3d(0, -1px, 0) scale(1.01); }
.btn-primary { background: var(--accent); color: #fff; margin-top: 8px; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--accent) 58%, transparent); }
.btn-primary:active { transform: scale(0.985); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

/* 错误提示 */
.error-banner {
    background: rgba(248,81,73,0.1);
    border: 1px solid rgba(248,81,73,0.35);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--danger);
    margin-bottom: 14px;
    display: none;
    word-break: break-word;
}
.error-banner.show { display: block; animation: shake 0.4s ease-out; }
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* 认证切换 */
.toggle-section { margin-top: 4px; }
.toggle-link {
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-sans);
    text-decoration: none;
}
.toggle-link:hover { text-decoration: underline; color: var(--accent-hover); }
.key-section { display: none; }
.key-section.show { display: block; }

/* ===== 终端页面 ===== */
.terminal-page {
    position: fixed;
    inset: 0 0 auto 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    height: var(--visual-vh, var(--stable-vh, 100vh));
    max-height: var(--visual-vh, var(--stable-vh, 100vh));
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    transform: translate3d(0, 0, 0);
    transition: background-color 0.24s ease, border-color 0.24s ease;
    will-change: height, transform;
}

html.viewport-updating .terminal-page {
    transition:
        height 0.40s cubic-bezier(0.16, 1, 0.3, 1),
        max-height 0.40s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.40s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.24s ease,
        border-color 0.24s ease;
}

html.keyboard-open .terminal-page {
    transform: translate3d(0, var(--visual-offset-top, 0px), 0);
}

/* 顶栏 */
.terminal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--surface);
    border-bottom: none;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
    font-size: 13px;
    flex-shrink: 0;
    gap: 10px;
    flex-wrap: wrap;
}
.terminal-topbar .status { flex: 0 0 auto; }
.terminal-topbar .status { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--warning);
    flex-shrink: 0;
    animation: pulse 1.5s infinite;
}
.status-dot.connected { background: var(--success); animation: none; }
.status-dot.disconnected { background: var(--danger); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.terminal-topbar .info {
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.topbar-actions.scroll-active,
.topbar-actions:hover,
.topbar-actions:focus-within { scrollbar-width: thin; }
.topbar-actions::-webkit-scrollbar { height: 0; }
.topbar-actions.scroll-active::-webkit-scrollbar,
.topbar-actions:hover::-webkit-scrollbar,
.topbar-actions:focus-within::-webkit-scrollbar { height: 4px; }
.topbar-actions::-webkit-scrollbar-thumb { background: rgba(139,148,158,0.45); border-radius: 999px; }
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1.2;
    min-height: 30px;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: transform .46s var(--ease-micro), background .32s var(--ease-smooth), border-color .32s var(--ease-smooth), box-shadow .46s var(--ease-micro), color .28s ease;
    transform: translateZ(0);
    white-space: nowrap;
    flex: 0 0 auto;
}
.btn-sm:hover { transform: translate3d(0, -1px, 0) scale(1.01); border-color: color-mix(in srgb, var(--text-secondary) 26%, transparent); background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: 0 10px 30px -22px rgba(0,0,0,.28); }
.btn-sm.danger {
    border-color: rgba(248,81,73,0.4);
    color: var(--danger);
}
.btn-sm.danger:hover { background: rgba(248,81,73,0.1); }
.btn-sm.active {
    border-color: transparent;
    background: var(--accent-soft-bg);
    color: var(--accent-hover);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.wterm-theme-toggle {
    min-width: 78px;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
}
.wterm-theme-toggle.active {
    color: var(--accent-hover);
}
.wterm-theme-toggle::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.wterm-theme-toggle.switching::after {
    animation: themeToggleRipple 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes themeToggleRipple {
    0% { opacity: 0.72; transform: translate(-50%, -50%) scale(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(12); }
}

/* ── Top command input: desktop and mobile both show between topbar & terminal ── */
.terminal-top-input {
    display: block;
    flex-shrink: 0;
    background: var(--surface);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
}

/* ── Bottom bar: auxiliary keys, fixed above keyboard on mobile ── */
.terminal-bottom-bar {
    display: none;
}

/* ===== 辅助工具栏 (desktop) ===== */
.toolbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 6px 10px;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* ── Mobile auxiliary keys bar (hidden on desktop) ── */
.mobile-aux-keys {
    display: none;
}
.toolbar.scroll-active,
.toolbar:hover,
.toolbar:focus-within { scrollbar-width: thin; }
.toolbar::-webkit-scrollbar { height: 0; }
.toolbar.scroll-active::-webkit-scrollbar,
.toolbar:hover::-webkit-scrollbar,
.toolbar:focus-within::-webkit-scrollbar { height: 4px; }
.toolbar::-webkit-scrollbar-thumb { background: rgba(139,148,158,0.45); border-radius: 999px; }
.toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    margin-bottom: 4px;
}
.tool-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    min-width: max-content;
    flex: 0 0 auto;
    text-align: center;
    font-family: var(--font-sans);
    transition: transform .42s var(--ease-micro), background .24s var(--ease-smooth), border-color .24s var(--ease-smooth), color .2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    overflow: visible;
    text-overflow: clip;
}
.tool-btn:hover { transform: translate3d(0, -1px, 0) scale(1.01); background: color-mix(in srgb, var(--text) 5%, transparent); border-color: color-mix(in srgb, var(--text-secondary) 28%, var(--border)); }
.tool-btn:active {
    transform: scale(0.97);
    background: var(--accent-soft-bg);
    color: var(--accent-hover);
    border-color: var(--accent-soft-border);
}
.modifier.active {
    background: var(--accent-soft-bg);
    color: var(--accent-hover);
    border-color: var(--accent-soft-border);
}
.font-size-btn {
    min-width: 34px;
    font-family: var(--font-mono);
    font-weight: 800;
}
.tool-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 2px;
}

/* 命令输入行 */
.cmd-input-row { display: flex; align-items: center; gap: 12px; }
.cmd-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    max-height: 112px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.45;
    font-family: var(--font-mono);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    outline: none;
    resize: none;
    overflow-y: hidden;
    white-space: pre-wrap;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cmd-input:focus { border-color: color-mix(in srgb, var(--accent) 44%, var(--border)); box-shadow: var(--focus-ring); }
.cmd-send-btn {
    padding: 6px 14px;
    min-width: 64px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
    font-family: var(--font-sans);
}
.cmd-send-btn:hover { background: var(--accent-hover); }

/* ===== 终端容器 ===== */
.terminal-container {
    order: 2;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    background: var(--wterm-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overscroll-behavior: none;
    contain: layout paint;
    --terminal-scrollbar-size: 12px;
    transition: background-color 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.terminal-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
        var(--wterm-bg);
    opacity: 0;
    transform: scale(1.02);
}
.terminal-container.wterm-theme-animating::after {
    animation: terminalThemeFade 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes terminalThemeFade {
    0% { opacity: 0.34; transform: scale(1.018); }
    100% { opacity: 0; transform: scale(1); }
}
:root[data-theme="light"]:not([data-wterm-theme="default"]) .terminal-container { background: var(--wterm-bg); }
.terminal-container .wterm-wrapper {
    width: 100%;
    height: auto !important;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
    font-family: var(--font-mono);
    font-size: var(--terminal-font-size);
    padding: 12px;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
    scrollbar-gutter: stable;
    background: var(--wterm-bg);
    color: var(--wterm-fg);
    transition: background-color 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-wterm-theme] .terminal-container .wterm-wrapper,
:root[data-wterm-theme] .terminal-container .wterm-wrapper.wterm {
    background: var(--wterm-bg) !important;
    color: var(--wterm-fg) !important;
}
:root[data-wterm-theme] .terminal-container .wterm-wrapper ::selection {
    background: var(--wterm-selection);
}
.terminal-container.wterm-theme-animating .wterm-wrapper { filter: saturate(1.08); }
:root[data-wterm-theme="light"] .terminal-container .wterm-wrapper,
:root[data-wterm-theme="light"] .terminal-container .wterm-wrapper.wterm {
    background: var(--wterm-bg) !important;
    color: var(--wterm-fg) !important;
}
:root[data-wterm-theme="light"] .terminal-container .wterm-wrapper .term-grid {
    color: var(--wterm-fg);
}
:root[data-wterm-theme="light"] .terminal-container .wterm-wrapper ::selection {
    background: var(--wterm-selection);
}
.terminal-container .wterm-wrapper::-webkit-scrollbar {
    width: auto;
    height: auto;
}
.terminal-container .wterm-wrapper.wterm {
    border-radius: 0;
    box-shadow: none;
    padding: 12px;
    outline: none;
    overflow-y: auto;
    overflow-x: hidden;
}
.terminal-container .wterm-wrapper.wterm.has-scrollback {
    overflow-y: auto;
}
.terminal-container .wterm-wrapper .term-grid {
    display: block;
    white-space: pre;
    contain: layout paint style;
    will-change: contents;
    overflow-anchor: none;
    user-select: text;
    -webkit-user-select: text;
    font-family: var(--term-font-family, var(--font-mono));
    font-size: var(--term-font-size, var(--terminal-font-size));
    line-height: var(--term-row-height);
    letter-spacing: 0;
    font-variant-ligatures: none;
    font-kerning: none;
    text-rendering: optimizeSpeed;
    transition: none !important;
    animation: none !important;
}

.terminal-container .wterm-wrapper .term-row,
.terminal-container .wterm-wrapper .term-scrollback-row {
    min-width: 100%;
    tab-size: 8;
    height: var(--term-row-height);
    line-height: var(--term-row-height);
    white-space: pre;
    letter-spacing: 0;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
}
.terminal-container .wterm-wrapper .term-row > span,
.terminal-container .wterm-wrapper .term-scrollback-row > span {
    display: inline-block;
    height: var(--term-row-height);
    line-height: var(--term-row-height);
    vertical-align: top;
    white-space: pre;
    font-variant-ligatures: none;
    font-kerning: none;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
}
.terminal-container .wterm-wrapper .term-block {
    display: inline-block;
    width: 1ch;
    min-width: 1ch;
    max-width: 1ch;
    overflow: hidden;
    color: transparent;
}
.terminal-container.terminal-follow-paused::before {
    content: '历史区';
    position: absolute;
    right: 18px;
    bottom: 14px;
    z-index: 6;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(10,132,255,0.18);
    color: var(--accent);
    border: 1px solid rgba(10,132,255,0.28);
    font-size: 12px;
    pointer-events: none;
    backdrop-filter: blur(8px);
}
.terminal-container .wterm-wrapper .terminal-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}
.terminal-container .wterm-wrapper .terminal-link:hover {
    color: var(--accent-hover);
}
.terminal-container .wterm-wrapper.focused {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.terminal-container.terminal-mouse-mode .wterm-wrapper {
    cursor: default;
}
.terminal-scrollbar {
    display: none;
}
.terminal-container.scrollable .terminal-scrollbar,
.terminal-container:hover .terminal-scrollbar,
.terminal-scrollbar.dragging {
    opacity: 1;
}
.terminal-container.scrollable .terminal-scrollbar {
    pointer-events: auto;
}
.terminal-scrollbar-track {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(139,148,158,0.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.terminal-scrollbar-thumb {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 0;
    min-height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(10,132,255,0.95), rgba(10,132,255,0.52));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 4px 12px rgba(0,0,0,0.28);
    transform: translateY(var(--terminal-scroll-thumb-top, 0px));
    height: var(--terminal-scroll-thumb-height, 100%);
    cursor: grab;
    touch-action: none;
}
.terminal-scrollbar-thumb:active,
.terminal-scrollbar.dragging .terminal-scrollbar-thumb {
    cursor: grabbing;
    background: linear-gradient(180deg, rgba(41,151,255,1), rgba(10,132,255,0.68));
}
:root[data-theme="light"] .terminal-scrollbar-track {
    background: rgba(101,109,118,0.14);
    box-shadow: inset 0 0 0 1px rgba(31,35,40,0.06);
}
:root[data-theme="light"] .terminal-scrollbar-thumb {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.65) inset, 0 4px 12px rgba(31,35,40,0.18);
}

/* 连接状态覆盖层 */
.terminal-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13,17,23,0.85);
    z-index: 10;
    flex-direction: column;
    gap: 14px;
    transition: opacity 0.3s;
}
:root[data-theme="light"] .terminal-overlay { background: rgba(246,248,250,0.9); }
.terminal-overlay.hidden { opacity: 0; pointer-events: none; }
.terminal-overlay .spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.terminal-overlay .msg { font-size: 14px; color: var(--text-secondary); }

/* ===== 文件管理器样式 ===== */
.file-manager,
.docker-panel {
    position: absolute;
    top: 52px; left: 16px;
    width: min(820px, 72vw);
    height: min(620px, 68vh);
    min-width: 460px;
    min-height: 360px;
    background: var(--surface);
    z-index: 20;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: perspective(1200px) scale(0.78) translate3d(0, 42px, 0);
    transform-origin: top center;
    filter: blur(8px);
    box-shadow: 0 28px 90px rgba(0,0,0,0.38);
    transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease,
        filter 0.32s ease,
        visibility 0.36s;
    will-change: transform, opacity, filter;
}
.docker-panel {
    left: 28px;
    width: min(980px, 80vw);
    height: min(660px, 72vh);
    min-width: 540px;
    min-height: 380px;
    display: none;
}
.file-manager.front,
.docker-panel.front,
.info-modal.front,
.snippet-panel.front,
.shortcut-panel.front { z-index: var(--panel-z, 47); }
.fm-editor-modal.editor-window.front { z-index: 520; }
.file-manager.front-switching,
.info-modal.front-switching,
.docker-panel.front-switching,
.snippet-panel.front-switching,
.shortcut-panel.front-switching {
    animation: panelFrontSwitch 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.file-manager.dragging,
.file-manager.resizing,
.info-modal.dragging,
.info-modal.resizing,
.docker-panel.dragging,
.docker-panel.resizing,
.snippet-panel.dragging,
.snippet-panel.resizing,
.shortcut-panel.dragging,
.shortcut-panel.resizing,
.fm-editor-modal.editor-window.dragging,
.fm-editor-modal.editor-window.resizing { transition: none; user-select: none; touch-action: none; }
.file-manager.layout-animating,
.info-modal.layout-animating,
.docker-panel.layout-animating,
.snippet-panel.layout-animating,
.shortcut-panel.layout-animating,
.fm-editor-modal.editor-window.layout-animating,
.image-preview-modal.layout-animating,
.media-preview-modal.layout-animating {
    transition:
        left .62s var(--ios-open),
        top .62s var(--ios-open),
        width .62s var(--ios-open),
        height .62s var(--ios-open),
        border-radius .42s ease,
        transform .72s var(--ios-bounce),
        opacity 0.28s ease,
        filter 0.32s ease;
}
.file-manager.open,
.docker-panel.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}

@keyframes panelFrontSwitch {
    0% {
        transform: translate3d(0, 2px, 0) scale(0.996);
        filter: brightness(0.96);
        box-shadow: 0 18px 58px rgba(0,0,0,0.28);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        box-shadow: 0 28px 90px rgba(0,0,0,0.38);
    }
}

.panel-drag-handle {
    position: relative;
    width: 100%;
    height: 28px;
    flex-shrink: 0;
    z-index: 6;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--border) 34%, transparent);
    opacity: 1;
    touch-action: none;
    pointer-events: auto;
}
.panel-traffic-btn {
    --panel-island-w: 58px;
    --panel-island-h: 22px;
    width: var(--panel-island-w);
    height: var(--panel-island-h);
    border: 1px solid rgba(139,148,158,.22);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        color-mix(in srgb, var(--surface) 76%, rgba(0,0,0,.26));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: none;
    transform: translateZ(0);
    transition:
        width .52s cubic-bezier(.16,1,.3,1),
        height .52s cubic-bezier(.16,1,.3,1),
        border-color .22s ease,
        background .22s ease,
        box-shadow .32s ease,
        transform .28s cubic-bezier(.16,1,.3,1),
        backdrop-filter .22s ease,
        -webkit-backdrop-filter .22s ease;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 3px 10px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
    will-change: transform, box-shadow, background;
}
.panel-traffic-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
    pointer-events: none;
}
.panel-traffic-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: inherit;
    pointer-events: none;
}
.panel-traffic-btn:hover {
    border-color: rgba(10,132,255,.38);
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
        color-mix(in srgb, var(--surface) 80%, rgba(10,132,255,.12));
    box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 0 0 3px rgba(10,132,255,.07);
}
.panel-traffic-btn:active,
.panel-traffic-btn.pressing {
    transform: scale(.92);
    transition: transform .10s cubic-bezier(.3,0,.2,1), background .14s ease;
}
.panel-traffic-btn.active-layout.pressing {
    transform: scale(.96);
}
.panel-traffic-btn.active-layout {
    --panel-island-w: 64px;
    --panel-island-h: 22px;
    border-color: rgba(10,132,255,.42);
    background:
        linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02)),
        color-mix(in srgb, var(--surface) 70%, rgba(10,132,255,.18));
    color: var(--text);
    box-shadow:
        0 5px 15px rgba(0,0,0,.22),
        0 0 0 3px rgba(10,132,255,.08),
        inset 0 1px 0 rgba(255,255,255,.10);
}
.panel-traffic-btn.active-layout::before {
    opacity: 1;
}
.panel-traffic-btn.active-layout::after { opacity: 1; }
.panel-traffic-btn span,
.panel-traffic-btn span::before,
.panel-traffic-btn span::after {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-secondary) 74%, transparent);
    box-shadow: none;
    transition:
        transform 0.22s cubic-bezier(0.18, 1.2, 0.2, 1),
        opacity 0.18s ease,
        background-color 0.18s ease;
}
.panel-traffic-btn span { position: relative; }
.panel-traffic-btn span::before,
.panel-traffic-btn span::after { content: ''; position: absolute; top: 0; }
.panel-traffic-btn span::before { left: -10px; }
.panel-traffic-btn span::after { left: 10px; }
.panel-traffic-btn:hover span,
.panel-traffic-btn:hover span::before,
.panel-traffic-btn:hover span::after {
    background: rgba(255,255,255,.22);
}
.panel-traffic-btn:active span,
.panel-traffic-btn.pressing span {
    transform: scale(0.82);
}
.panel-traffic-btn:active span::before,
.panel-traffic-btn.pressing span::before {
    transform: translateX(2px);
}
.panel-traffic-btn:active span::after,
.panel-traffic-btn.pressing span::after {
    transform: translateX(-2px);
}
.panel-traffic-btn.active-layout span,
.panel-traffic-btn.active-layout span::before,
.panel-traffic-btn.active-layout span::after,
.ai-agent-panel .panel-traffic-btn.active-layout span,
.ai-agent-panel .panel-traffic-btn.active-layout span::before,
.ai-agent-panel .panel-traffic-btn.active-layout span::after {
    opacity: 0;
    transform: scale(.35);
    filter: blur(5px);
}
@keyframes panelTrafficIslandBreath {
    0%, 100% {
        transform: translateZ(0) translateY(-.2px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            inset 0 -10px 24px rgba(0,0,0,.10),
            0 14px 34px rgba(0,0,0,.28),
            0 0 0 1px rgba(255,255,255,.07);
    }
    50% {
        transform: translateZ(0) translateY(.3px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            inset 0 -9px 22px rgba(0,0,0,.09),
            0 15px 36px rgba(0,0,0,.30),
            0 0 0 1px rgba(255,255,255,.08);
    }
}
.panel-drag-handle:active,
.panel-titlebar:active { cursor: default; }
.panel-titlebar { cursor: default; user-select: none; }
.panel-layout-menu {
    position: fixed;
    z-index: var(--panel-layout-menu-z, 10020);
    width: var(--panel-island-menu-width, min(236px, calc(100vw - 16px)));
    height: var(--panel-island-menu-height, 50px);
    min-height: 0;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid rgba(139,148,158,.22);
    border-radius: var(--panel-island-radius, 999px);
    background: color-mix(in srgb, var(--surface) 76%, rgba(0,0,0,.26));
    box-shadow: none;
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
    transition:
        left .52s cubic-bezier(0.32, 0.72, 0, 1),
        width .52s cubic-bezier(0.32, 0.72, 0, 1),
        height .52s cubic-bezier(0.32, 0.72, 0, 1),
        border-radius .52s cubic-bezier(0.32, 0.72, 0, 1),
        background .16s ease-out,
        opacity .12s ease;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    will-change: top, left, width, height, border-radius, opacity;
    overflow: hidden;
    contain: none;
}
.panel-layout-menu.island-open {
    opacity: 1;
    pointer-events: auto;
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, rgba(255,255,255,.08)), color-mix(in srgb, var(--surface) 84%, rgba(0,0,0,.20)));
    box-shadow:
        0 18px 46px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,.10);
}
.panel-layout-menu.island-closing {
    opacity: 1;
    pointer-events: none;
    border-radius: var(--panel-island-radius, 999px);
    background: color-mix(in srgb, var(--surface) 76%, rgba(0,0,0,.26));
    box-shadow: none;
    transition:
        left .42s cubic-bezier(0.4, 0, 0.6, 1),
        width .42s cubic-bezier(0.4, 0, 0.6, 1),
        height .42s cubic-bezier(0.4, 0, 0.6, 1),
        border-radius .42s cubic-bezier(0.4, 0, 0.6, 1),
        background .16s ease-in,
        opacity .01s linear .42s;
}
.panel-layout-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 74%, transparent);
    box-shadow:
        -10px 0 0 color-mix(in srgb, var(--text-secondary) 74%, transparent),
        10px 0 0 color-mix(in srgb, var(--text-secondary) 74%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    z-index: 2;
}
.panel-layout-menu.island-animating.island-open::after {
    animation: terminalIslandSourceDotsToPanel .18s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.panel-layout-menu.island-animating.island-closing::after {
    animation: terminalIslandSourceDotsReturn .24s cubic-bezier(0.4, 0, 0.6, 1) both;
}
.panel-layout-menu.island-open:not(.island-animating)::after,
.panel-layout-menu.island-closing:not(.island-animating)::after {
    opacity: 0;
    animation: none;
}
@keyframes panelMenuIn {
    0% { opacity: 0; transform: translateY(0) scaleX(0.18) scaleY(0.42); filter: blur(10px); }
    54% { opacity: 1; transform: translateY(0) scaleX(1.02) scaleY(1.045); filter: blur(0); }
    78% { transform: translateY(0) scaleX(0.998) scaleY(0.992); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes panelMenuPopIn {
    0% {
        opacity: 0;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
        transform:
            translate3d(var(--island-start-dx, 0px), var(--island-start-dy, 0px), 0)
            scaleX(max(var(--island-start-scale-x, .24), .24))
            scaleY(max(var(--island-start-scale-y, .34), .34));
        filter: blur(8px) saturate(.9);
    }
    62% {
        opacity: 1;
        border-radius: 22px;
        clip-path: inset(0 round 22px);
        transform: translate3d(0, 1px, 0) scale(1.018);
        filter: blur(0) saturate(1.04);
    }
    100% {
        opacity: 1;
        border-radius: 18px;
        clip-path: inset(0 round 18px);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}
.panel-layout-menu button {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 0;
    border-radius: 12px;
    padding: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, 3px, 0) scale(.96);
    opacity: 0;
    filter: blur(3px);
    transition:
        opacity .14s ease .30s,
        transform .18s cubic-bezier(0.2, 0.9, 0.2, 1) .30s,
        filter .14s ease .30s,
        background 0.14s ease;
}
.panel-layout-menu button:nth-child(1) { --item-index: 0; }
.panel-layout-menu button:nth-child(2) { --item-index: 1; }
.panel-layout-menu button:nth-child(3) { --item-index: 2; }
.panel-layout-menu button:nth-child(4) { --item-index: 3; }
.panel-layout-menu button:nth-child(5) { --item-index: 4; }
.panel-layout-menu.island-open button {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition-delay: calc(.30s + (var(--item-index, 0) * 18ms));
}
.panel-layout-menu.island-closing button {
    opacity: 0;
    transform: translate3d(0, -3px, 0) scale(.94);
    filter: blur(3px);
    transition-delay: 0ms;
}
@keyframes panelMenuItemIn {
    0% { opacity: 0; transform: translate3d(0, 4px, 0) scale(.92); filter: blur(3px); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
.panel-layout-menu button:hover,
.panel-layout-menu button:active { background: rgba(255,255,255,0.10); }
.panel-layout-menu button:active { transform: scale(0.9); }
.panel-layout-icon {
    width: min(28px, 100%);
    height: 20px;
    min-width: 22px;
    border: 1.5px solid var(--text-secondary);
    border-radius: var(--radius-sm);
    display: block;
    position: relative;
    opacity: 0.95;
    overflow: hidden;
    align-self: center;
    margin: auto 0;
}
.panel-layout-icon.full { background: rgba(10,132,255,0.16); }
.panel-layout-icon.half::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    border-top: 1.5px solid var(--accent);
    border-radius: 0 0 4px 4px;
    background: rgba(10,132,255,0.2);
}
.panel-layout-icon.left::after,
.panel-layout-icon.right::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 25%;
    border-inline-end: 1.5px solid var(--accent);
    background: rgba(10,132,255,0.2);
}
.panel-layout-icon.left::after { left: 0; border-radius: 4px 0 0 4px; }
.panel-layout-icon.right::after { right: 0; border-inline-end: 0; border-inline-start: 1.5px solid var(--accent); border-radius: 0 4px 4px 0; }
.panel-layout-close:hover,
.panel-layout-close:active {
    background: rgba(248,81,73,0.14) !important;
}
.panel-layout-icon.close {
    border-color: rgba(248,81,73,0.72);
    background: rgba(248,81,73,0.08);
}
.panel-layout-icon.close::before,
.panel-layout-icon.close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--danger);
    transform-origin: center;
}
.panel-layout-icon.close::before { transform: translate(-50%, -50%) rotate(45deg); }
.panel-layout-icon.close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.panel-resize-handle {
    --resize-corner-color: color-mix(in srgb, var(--text-secondary) 64%, transparent);
    position: absolute;
    bottom: 8px;
    width: 38px;
    height: 38px;
    cursor: nwse-resize;
    z-index: 5;
    opacity: 0.62;
    touch-action: none;
    border-radius: var(--radius-lg);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.panel-resize-handle.right { right: 4px; }
.panel-resize-handle.left { left: 4px; cursor: nesw-resize; }
.panel-resize-handle:hover,
.file-manager.resizing .panel-resize-handle,
.info-modal.resizing .panel-resize-handle,
.docker-panel.resizing .panel-resize-handle,
.snippet-panel.resizing .panel-resize-handle,
.shortcut-panel.resizing .panel-resize-handle,
.fm-editor-modal.editor-window.resizing .panel-resize-handle {
    opacity: 0.95;
}
.panel-resize-handle::before {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 31px;
    height: 31px;
    bottom: 0;
    border-color: var(--resize-corner-color);
    border-style: solid;
    border-width: 0 3px 3px 0;
    border-bottom-right-radius: var(--radius-lg);
}
.panel-resize-handle::after {
    content: none;
}
.panel-resize-handle.right::before { right: 0; }
.panel-resize-handle.left::before {
    left: 0;
    border-width: 0 0 3px 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--radius-lg);
}

.fm-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--border); min-width: 0; }
.fm-header { flex-wrap: wrap; min-width: 0; }
.fm-header.panel-titlebar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.fm-header.panel-titlebar::-webkit-scrollbar { height: 0; }
.fm-path-box { flex: 1 1 240px; min-width: 160px; display: flex; gap: 4px; }
.fm-header.panel-titlebar .fm-path-box { flex: 1 1 auto; order: 0; min-width: 96px; }
.fm-header.panel-titlebar .fm-refresh-btn { margin-left: auto; }
.fm-path-input { flex: 1; min-width: 0; padding: 4px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font-mono); }
.fm-search-input { flex: 1; padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font-sans); margin: 0 12px 4px; }
.fm-toolbar { display: flex; gap: 6px; padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--border); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.fm-upload-label { cursor: pointer; }
.fm-select-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.fm-paste-btn { color: #fff; background: var(--accent); border-color: var(--accent); }
.fm-drop-overlay {
    position: absolute;
    inset: 126px 12px 12px;
    z-index: 24;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent-hover);
    font-weight: 700;
    text-align: center;
    padding: 16px;
    backdrop-filter: blur(8px);
    pointer-events: none;
}
.file-manager.drag-over .fm-drop-overlay { display: flex; }

.fm-list { flex: 1; overflow-y: auto; padding: 8px; }

.fm-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; width: 100%; padding: 8px 12px;
    border-bottom: 1px solid var(--border); cursor: pointer;
    animation: fadeInItem 0.2s ease-out; transition: background 0.1s;
}
.fm-item:hover { background: var(--bg); }

.fm-item.selected {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    box-shadow: inset 3px 0 0 var(--accent);
}
.fm-item.selected:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.fm-context-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    opacity: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--surface) 3%, transparent);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: opacity .28s cubic-bezier(.2,.8,.2,1), backdrop-filter .35s cubic-bezier(.2,.8,.2,1);
}
.fm-context-overlay.show {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.fm-context-menu {
    position: fixed;
    z-index: 10021;
    width: 260px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 62%, rgba(255,255,255,.18));
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--surface) 68%, transparent));
    box-shadow: 0 12px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    opacity: 0;
    transform: translateY(8px) scale(.92);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity .22s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.18,1,.32,1);
    will-change: transform, opacity;
}
.fm-context-menu.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fm-context-item {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: default;
    transition: background .18s ease, transform .15s ease;
}
.fm-context-item:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.fm-context-item:active { transform: scale(.985); }
.fm-menu-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fm-menu-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex: 0 0 20px; }
.fm-menu-icon svg { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .96; }
.fm-menu-shortcut { font-size: 12px; opacity: .55; min-width: 42px; text-align: right; }
.fm-context-divider { height: 1px; margin: 6px 8px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.fm-context-item.danger, .fm-context-item.danger .fm-menu-icon { color: #ff6b6b; }
@media (max-width: 420px) {
    .fm-context-menu { width: 220px; }
    .fm-context-item { height: 44px; }
}

@keyframes fadeInItem {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.fm-item span { flex: 1; pointer-events: none; }
.fm-item-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.fm-item-actions button { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; opacity: 0.8; transition: opacity 0.15s; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.fm-item-actions button:hover { opacity: 1; }

/* 编辑器模态框 */
.fm-editor-modal {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--surface); display: flex; flex-direction: column; z-index: 25; padding: 12px;
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.975);
    filter: blur(8px);
    pointer-events: none;
    transition:
        opacity 0.24s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.26s ease;
    will-change: opacity, transform, filter;
}
.fm-editor-modal.open {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}
.fm-editor-modal.closing {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
    filter: blur(6px);
    pointer-events: none;
}
.fm-editor-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; min-width: 0; }
.fm-editor-header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-editor-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fm-editor-modal.editor-window {
    position: absolute;
    top: 52px;
    left: 16px;
    right: auto;
    bottom: auto;
    width: min(760px, calc(100vw - 32px));
    height: min(620px, calc(100dvh - 112px));
    min-width: 280px;
    min-height: 260px;
    z-index: 260;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 28px 90px rgba(0,0,0,0.38);
    overflow: hidden;
}
.fm-editor-modal.editor-window .fm-editor-header { cursor: grab; touch-action: none; }
.fm-editor-modal.editor-window.dragging .fm-editor-header { cursor: grabbing; }
.fm-editor-modal.editor-window .panel-resize-handle {
    z-index: 40;
    pointer-events: auto;
}
#fmCloseBtn,
#infoCloseBtn,
#dockerCloseBtn {
    display: none !important;
}
.fm-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px;
    margin-bottom: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-secondary);
}
.fm-editor-toolbar label { display: inline-flex; align-items: center; gap: 5px; }
.fm-editor-select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12px;
    max-width: 150px;
}
.fm-editor-check input { accent-color: var(--accent); }
.fm-editor-status { margin-left: auto; font-family: var(--font-mono); color: var(--text-secondary); }
.fm-editor-code-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    overflow: hidden;
}
.fm-editor-main {
    --editor-font-size: 13px;
    --editor-line-height: 20.15px;
    --editor-gutter-width: 48px;
    --editor-code-padding-x: 12px;
    --editor-code-padding-y: 12px;
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 40%, transparent);
    box-shadow: inset 0 0 0 1px rgba(139,148,158,0.08);
}
.fm-editor-highlight,
.fm-editor-textarea,
.fm-editor-indent-guides {
    font-family: var(--font-mono);
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    tab-size: 4;
    padding: var(--editor-code-padding-y) var(--editor-code-padding-x) var(--editor-code-padding-y) calc(var(--editor-gutter-width) + var(--editor-code-padding-x));
}
.fm-editor-indent-guides {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    margin: 0;
    pointer-events: none;
    overflow: visible;
    color: transparent;
    background: transparent;
    white-space: pre;
    transform: translate3d(0, 0, 0);
    transform-origin: 0 0;
}
.fm-editor-main.wrap-enabled .fm-editor-indent-guides {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}
.fm-editor-main:not(.wrap-enabled) .fm-editor-indent-guides {
    width: max-content;
    min-width: 100%;
}
.fm-indent-guide-line {
    position: relative;
    display: block;
    height: var(--editor-indent-line-height, var(--editor-line-height));
    min-height: var(--editor-line-height);
}
.fm-indent-guide-line::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--editor-indent-guide-width, 0px);
    pointer-events: none;
    opacity: 0.95;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--editor-indent-step, 32px) - 1px),
        rgba(139,148,158,0.18) calc(var(--editor-indent-step, 32px) - 1px),
        rgba(139,148,158,0.18) var(--editor-indent-step, 32px)
    );
    background-position: 0 0;
    background-size: var(--editor-indent-step, 32px) 100%;
}
:root[data-theme="light"] .fm-indent-guide-line::before {
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--editor-indent-step, 32px) - 1px),
        rgba(101,109,118,0.22) calc(var(--editor-indent-step, 32px) - 1px),
        rgba(101,109,118,0.22) var(--editor-indent-step, 32px)
    );
}
.fm-editor-line-numbers {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 3;
    width: var(--editor-gutter-width);
    min-height: 100%;
    padding: var(--editor-code-padding-y) 8px var(--editor-code-padding-y) 6px;
    border-right: 1px solid rgba(139,148,158,0.16);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    font-family: var(--font-mono);
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    text-align: right;
    user-select: none;
    pointer-events: none;
    white-space: pre;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}
.fm-editor-line-numbers span {
    display: block;
    height: var(--editor-line-number-height, var(--editor-line-height));
    line-height: var(--editor-line-height);
}
.fm-editor-highlight {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    margin: 0;
    pointer-events: none;
    color: var(--text);
    white-space: pre;
    overflow: visible;
    background: transparent;
    transform: translate3d(0, 0, 0);
    transform-origin: 0 0;
}
.fm-editor-main.wrap-enabled .fm-editor-highlight {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}
.fm-editor-main:not(.wrap-enabled) .fm-editor-highlight {
    width: max-content;
    min-width: 100%;
}
.fm-editor-textarea {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    resize: none;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--accent-hover);
    outline: none;
    white-space: pre-wrap;
    scrollbar-color: rgba(10,132,255,0.55) transparent;
}
.fm-editor-main:not(.wrap-enabled) .fm-editor-textarea {
    white-space: pre;
}
.fm-editor-textarea::selection {
    background: rgba(10,132,255,0.28);
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.fm-editor-minimap {
    --minimap-view-top: 0%;
    --minimap-view-height: 100%;
    --minimap-scale: 0.22;
    --minimap-font-size: 3px;
    --minimap-line-height: 4.4px;
    --minimap-padding-top: 4px;
    --minimap-padding-left: 12px;
    --minimap-code-top: 0px;
    position: relative;
    width: 148px;
    flex: 0 0 148px;
    padding: 0;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 66%, transparent);
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
    transition: width 0.22s ease, flex-basis 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
}
.fm-editor-minimap.dragging { cursor: grabbing; }
.fm-editor-minimap.dragging::after {
    border-color: rgba(41,151,255,0.95);
    background: rgba(10,132,255,0.24);
}
.fm-editor-minimap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, transparent 0, transparent calc(100% - 18px), rgba(0,0,0,0.10));
    pointer-events: none;
}
.fm-editor-minimap::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: var(--minimap-view-top);
    height: var(--minimap-view-height);
    min-height: 18px;
    border: 1.5px solid rgba(10,132,255,0.62);
    border-radius: var(--radius-sm);
    background: rgba(10,132,255,0.14);
    box-shadow: 0 0 0 999px rgba(13,17,23,0.08), 0 6px 16px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 3;
}
.fm-minimap-code {
    position: absolute;
    z-index: 2;
    top: var(--minimap-code-top);
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: var(--minimap-padding-top) 7px 6px var(--minimap-padding-left);
    border: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--minimap-font-size);
    line-height: var(--minimap-line-height);
    white-space: pre;
    pointer-events: none;
    opacity: 0.92;
}
.fm-minimap-line {
    display: block;
    width: 100%;
    height: var(--minimap-line-height);
    margin: 0;
    overflow: hidden;
    white-space: pre;
    text-overflow: clip;
    color: color-mix(in srgb, var(--text) 68%, var(--text-secondary));
    opacity: 0.74;
}
.fm-minimap-seg {
    display: inline;
    background: transparent;
    opacity: inherit;
}
.fm-minimap-seg.indent { opacity: 1; }
.fm-minimap-seg.comment { color: #9a9ca3; opacity: 0.42; }
.fm-minimap-seg.keyword { color: #ff7b72; opacity: 0.78; }
.fm-minimap-seg.string { color: #a5d6ff; opacity: 0.72; }
.fm-minimap-seg.number,
.fm-minimap-seg.literal { color: #2997ff; opacity: 0.72; }
.fm-minimap-seg.function { color: #d2a8ff; opacity: 0.78; }
.fm-minimap-seg.tag { color: #7ee787; opacity: 0.72; }
:root[data-theme="light"] .fm-minimap-seg.comment { color: #6e7781; }
:root[data-theme="light"] .fm-minimap-seg.keyword { color: #cf222e; }
:root[data-theme="light"] .fm-minimap-seg.string { color: #0a3069; }
:root[data-theme="light"] .fm-minimap-seg.number,
:root[data-theme="light"] .fm-minimap-seg.literal { color: #0550ae; }
:root[data-theme="light"] .fm-minimap-seg.function { color: #8250df; }
:root[data-theme="light"] .fm-minimap-seg.tag { color: #116329; }
.fm-editor-modal.minimap-hidden .fm-editor-minimap {
    width: 0;
    flex-basis: 0;
    padding-inline: 0;
    margin-left: -10px;
    opacity: 0;
    pointer-events: none;
}
.fm-editor-modal.minimap-hidden .fm-editor-code-shell { gap: 0; }
.tok-comment { color: #9a9ca3; font-style: italic; }
.tok-keyword { color: #ff7b72; font-weight: 650; }
.tok-string { color: #a5d6ff; }
.tok-number,
.tok-literal { color: #2997ff; }
.tok-function { color: #d2a8ff; }
.tok-tag { color: #7ee787; }
.tok-attr,
.tok-property { color: #2997ff; }
.tok-variable,
.tok-type { color: #ffa657; }
.tok-operator { color: #ff7b72; }
.tok-punctuation { color: #9a9ca3; }
:root[data-theme="light"] .tok-comment { color: #6e7781; }
:root[data-theme="light"] .tok-keyword,
:root[data-theme="light"] .tok-operator { color: #cf222e; }
:root[data-theme="light"] .tok-string { color: #0a3069; }
:root[data-theme="light"] .tok-number,
:root[data-theme="light"] .tok-literal,
:root[data-theme="light"] .tok-attr,
:root[data-theme="light"] .tok-property { color: #0550ae; }
:root[data-theme="light"] .tok-function { color: #8250df; }
:root[data-theme="light"] .tok-tag { color: #116329; }
:root[data-theme="light"] .tok-variable,
:root[data-theme="light"] .tok-type { color: #953800; }
.fm-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-start;
    padding-left: calc(clamp(0px, 44vw, 260px) - 8px);
    padding-right: 20px;
    transform: translateY(-4px);
    flex-wrap: wrap;
}
.fm-editor-actions .btn {
    width: auto;
    min-width: 96px;
    flex: 0 1 auto;
    height: 36px;
    padding: 8px 16px;
    margin-top: 0;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
}
.btn-secondary {
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm); cursor: pointer;
    padding: 8px 16px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-secondary:hover { border-color: var(--text-secondary); background: var(--surface); }

/* 通用 Toast */
.toast-container {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    min-width: 180px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text);
    box-shadow: 0 14px 40px rgba(0,0,0,0.3);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    font-size: 13px;
    opacity: 0;
    transform: translate3d(14px, -6px, 0) scale(0.98);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease;
}
.toast.show { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.toast.success { border-color: rgba(63,185,80,0.45); box-shadow: 0 14px 40px rgba(63,185,80,0.12), 0 14px 40px rgba(0,0,0,0.26); }
.toast.error { border-color: rgba(248,81,73,0.5); color: var(--danger); }
.toast.info { border-color: rgba(10,132,255,0.45); }

/* ===== Docker 管理面板 ===== */
.docker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}
.docker-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docker-header-actions { display: flex; align-items: center; gap: 6px; }
.docker-status {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    min-height: 38px;
}
.docker-status[data-type="success"] { color: var(--success); }
.docker-status[data-type="warning"] { color: var(--warning); }
.docker-status[data-type="error"] { color: var(--danger); }
.docker-status.loading::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.docker-install-hint {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px;
}
.docker-empty-icon { font-size: 42px; }
.docker-install-hint h3 { font-size: 18px; }
.docker-install-hint p { color: var(--text-secondary); }
.docker-install-hint code {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    word-break: break-all;
}
.docker-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.docker-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.docker-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.docker-tab.active {
    border-color: var(--accent);
    background: rgba(10,132,255,0.16);
    color: var(--accent-hover);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.08) inset;
}
.docker-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}
.docker-tab-panel.active { display: block; }
.docker-table-wrap { width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.docker-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 12px; }
.docker-table th,
.docker-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.docker-table th { color: var(--text-secondary); background: var(--bg); position: sticky; top: 0; z-index: 1; }
.docker-table tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.docker-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.docker-actions .tool-btn { padding: 3px 7px; }
.docker-action-glyph-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.docker-actions .docker-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1;
}
.docker-action-glyph {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 18px;
    overflow: visible;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12));
}
.danger-text { color: var(--danger) !important; border-color: rgba(248,81,73,0.35) !important; }
.danger-text:hover { background: rgba(248,81,73,0.1) !important; }
.docker-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
}
.docker-badge.running { color: var(--success); border-color: rgba(63,185,80,0.42); background: rgba(63,185,80,0.1); }
.docker-badge.stopped { color: var(--text-secondary); background: rgba(139,148,158,0.1); }
.docker-pull-row { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.docker-pull-row input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}
.docker-log-box,
.docker-container-log {
    min-height: 86px;
    max-height: 180px;
    overflow: auto;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #05070a;
    color: #d1e7ff;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
}
:root[data-theme="light"] .docker-log-box,
:root[data-theme="light"] .docker-container-log { background: #f6f8fa; color: #1f2328; }
.docker-settings-desc { color: var(--text-secondary); font-size: 12px; margin-bottom: 10px; }
.docker-mirror-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.docker-mirror-item { display: flex; align-items: center; gap: 8px; }
.docker-mirror-item input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}
.docker-log-drawer {
    position: absolute;
    inset: auto 12px 12px 12px;
    height: min(290px, 48%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    overflow: hidden;
    animation: dockerDrawerIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dockerDrawerIn { from { transform: translateY(22px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.docker-log-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg); font-weight: 700; }
.docker-log-actions { display: flex; gap: 6px; align-items: center; }
.docker-container-log { flex: 1; max-height: none; border: 0; border-radius: 0; margin: 0; }

/* ===== 实时监控面板 ===== */
.info-modal {
    position: absolute;
    top: 52px; left: calc(100% - 500px);
    width: 480px; height: min(620px, 72vh); max-width: 95vw;
    min-width: 430px;
    min-height: 340px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 30;
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: perspective(1200px) scale(0.78) translate3d(0, -26px, 0);
    transform-origin: top right;
    filter: blur(8px);
    transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease,
        filter 0.32s ease;
    will-change: transform, opacity, filter;
}
.info-modal.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}
.info-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); font-weight: 600;
    position: sticky; top: 0; z-index: 2;
}
.info-modal-body { padding: 10px; overflow-y: auto; }
.info-modal-body,
.info-modal-body > :last-child,
.info-modal-body .doughnut-row:last-child,
.info-modal-body .ip-section:last-child,
.info-modal-body .disk-card-row:last-child,
.info-modal-body .doughnut-item:last-child,
.info-modal-body .ip-box:last-child {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.info-modal-body > :last-child,
.info-modal-body .doughnut-row:last-child,
.info-modal-body .ip-section:last-child,
.info-modal-body .disk-card-row:last-child {
    margin-bottom: 0;
}
.info-loading {
    padding: 24px 14px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 13px;
}
.info-loading.error { color: var(--danger); }

/* 环形进度条行 */
.doughnut-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.doughnut-row.two-col .doughnut-item { flex: 1 1 calc(50% - 10px); min-width: 140px; }
.doughnut-item.full-width { min-width: 100%; }
.doughnut-item {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 10px; flex: 1;
    display: flex; flex-direction: column; align-items: center;
}
.doughnut-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.doughnut-wrap { width: 100px; height: 100px; margin: 0 auto 6px; position: relative; display: flex; justify-content: center; }
.doughnut-text { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.doughnut-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.disk-card-row { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.disk-card { flex: 1 1 calc(50% - 10px); min-width: 240px; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
.disk-card-meta { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.disk-card .doughnut-wrap { width: 72px; height: 72px; margin: 0 0 0 12px; }
.disk-card .doughnut-label { margin-bottom: 4px; }

/* 小折线图行 */
.sparkline-row { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
.sparkline-row canvas, .line-canvas { flex: 1; height: 30px !important; max-width: 120px; }

/* IP 信息区块 */
.ip-section { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ip-box {
    display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; gap: 8px;
}
.ip-box span { font-weight: 600; color: var(--text-secondary); min-width: 40px; }
.ip-box code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.copy-ip-btn {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
    padding: 2px 6px; font-size: 14px; color: var(--text); flex-shrink: 0; transition: background 0.15s;
}
.copy-ip-btn:hover { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
    .file-manager,
    .info-modal,
    .docker-panel {
        transition: opacity 0.12s ease, visibility 0.12s ease;
        transform: none;
        filter: none;
    }
    .file-manager.open,
    .info-modal.open,
    .docker-panel.open,
    .file-manager.front-switching,
    .info-modal.front-switching,
    .docker-panel.front-switching,
    .fm-editor-modal.open,
    .fm-editor-modal.closing {
        animation: none;
        transform: none;
        filter: none;
    }
}

/* ===== 响应式调整 ===== */
@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
    .login-card { padding: 24px 16px 18px; border-radius: 12px; }
    .login-card h1 { font-size: 19px; }
    .form-row { flex-direction: column; gap: 10px; }
    .form-row .form-group.port-group { flex: 1; }
    .terminal-topbar { padding: 6px 10px; font-size: 11px; display: flex; flex-wrap: wrap; }
    .terminal-topbar .status { flex: 0 0 auto; }
    .terminal-topbar .info { flex: 1 1 100px; max-width: 100%; min-width: 80px; order: 2; }
    .topbar-actions {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        gap: 6px;
        padding: 6px 0 2px 0;
        margin-top: 4px;
    }
    .topbar-actions::-webkit-scrollbar { height: 0; }
    .topbar-actions.scroll-active::-webkit-scrollbar,
    .topbar-actions:hover::-webkit-scrollbar,
    .topbar-actions:focus-within::-webkit-scrollbar { height: 3px; }
    .btn-sm { padding: 5px 10px; min-height: 28px; font-size: 11px; }
    .wterm-theme-toggle { min-width: 70px; }
    .toolbar { padding: 5px 8px; }
    .toolbar-row { gap: 3px; }
    .tool-btn { padding: 3px 8px; font-size: 10px; min-width: max-content; max-width: none; }
    .tool-btn.combo,
    .tool-btn.modifier { max-width: none; }
    .font-size-btn { max-width: none; min-width: 30px; }
    .cmd-send-btn { padding: 4px 8px; font-size: 11px; }
    .file-manager,
    .info-modal,
    .docker-panel {
        min-width: 260px;
        min-height: 240px;
        max-width: none;
        width: calc(100vw - 20px);
        height: auto;
        max-height: min(85vh, 600px);
    }
    .fm-header { padding: 7px 8px; }
    .fm-path-box { flex-basis: 100%; order: 3; }
    .fm-header.panel-titlebar {
        gap: 4px;
        padding-inline: 6px;
    }
    .fm-header.panel-titlebar .tool-btn { padding-inline: 7px; }
    .fm-header.panel-titlebar .fm-back-btn {
        max-width: 38px;
        overflow: hidden;
        text-overflow: clip;
    }
    .fm-header.panel-titlebar .fm-path-box {
        flex: 1 1 92px;
        min-width: 82px;
    }
    .fm-header.panel-titlebar .fm-path-input { font-size: 12px; padding-inline: 7px; }
    .fm-header.panel-titlebar .fm-refresh-btn { margin-left: 0; }
    .fm-toolbar { padding-inline: 8px; overflow-x: auto; gap: 4px; }
    .toast-container { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px)); }
    .toast { width: 100%; max-width: none; }
    .panel-resize-handle { width: 38px; height: 38px; }
    .fm-editor-minimap { width: 112px; flex-basis: 112px; }
    .fm-editor-actions { flex-wrap: wrap; }
    .fm-editor-actions .btn { min-width: 90px; }
    #view-settings .settings-content {
        padding: 12px;
    }
    #view-settings input,
    #view-settings textarea,
    #view-settings select {
        min-width: 0;
        max-width: 100%;
    }
    #view-settings .check-line {
        align-items: flex-start;
        flex-wrap: wrap;
        line-height: 1.45;
    }
    #view-settings .check-line input {
        flex: 0 0 auto;
        margin-top: 2px;
    }
    #view-remote .section-head { margin-bottom: 12px; }
    .remote-servers,
    .remote-command,
    .result-card { padding: 10px; border-radius: var(--radius); }
    .remote-servers { grid-template-columns: 1fr; max-height: 220px; }
    .server-check { padding: 11px; grid-template-columns: 22px minmax(0, 1fr); }
    .server-check span { font-size: 13px; }
    .server-check em { font-size: 11px; }
    .remote-command label { font-size: 11px; }
    .remote-command input,
    .remote-command textarea { padding: 10px; font-size: 12px; }
    .remote-results { gap: 10px; margin-top: 12px; }
    .result-card h3 { font-size: 14px; }
    .result-card pre { max-height: 260px; font-size: 11px; padding: 9px; }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body:has(.terminal-page),
    body:has(.rdp-page) {
        min-height: 100dvh;
    }

    .terminal-page {
        inset: 0;
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: 0;
        box-shadow: none;
        will-change: auto;
    }

    html.viewport-updating .terminal-page {
        transition: background-color 0.24s ease, border-color 0.24s ease;
    }

    html.keyboard-open .terminal-page {
        transform: translate3d(0, 0, 0);
    }

    .terminal-container {
        order: 1;
        flex: 1 1 auto;
    }

    .terminal-input-panel {
        order: 2;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        transform: translate3d(0, calc(-1 * var(--keyboard-inset, 0px)), 0);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
        box-shadow: 0 -1px 0 var(--border);
    }

    html.keyboard-open .terminal-input-panel {
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .file-manager,
    .info-modal,
    .docker-panel {
        min-width: 260px;
        min-height: 240px;
        max-width: none;
        width: calc(100vw - 20px);
        height: auto;
        max-height: min(85vh, 600px);
    }
    .terminal-topbar { align-items: flex-start; flex-wrap: wrap; }
    .topbar-actions {
        flex-basis: 100%;
        order: 3;
        margin-top: 4px;
        padding: 6px 0 2px 0;
    }
    .topbar-actions::-webkit-scrollbar { height: 0; }
    .topbar-actions.scroll-active::-webkit-scrollbar,
    .topbar-actions:hover::-webkit-scrollbar,
    .topbar-actions:focus-within::-webkit-scrollbar { height: 3px; }
    .btn-sm { font-size: 11px; }
    .fm-header.panel-titlebar {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .fm-header.panel-titlebar::-webkit-scrollbar { height: 0; }
    .fm-header.panel-titlebar .fm-path-box { min-width: 82px; }
    .docker-table { min-width: 640px; font-size: 11px; }
    .docker-table th,
    .docker-table td { padding: 6px 8px; }
    .docker-log-header { align-items: flex-start; flex-direction: column; }
    .docker-log-actions { width: 100%; overflow-x: auto; gap: 4px; }
    .panel-resize-handle { width: 38px; height: 38px; }
    .fm-editor-code-shell { gap: 6px; padding: 6px; }
    .fm-editor-minimap { width: 98px; flex-basis: 98px; }
}

/* ===== RDP / VNC 页面 ===== */
.rdp-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--visual-vh, var(--stable-vh, 100vh));
    max-height: var(--visual-vh, var(--stable-vh, 100vh));
    min-height: 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
}

.rdp-topbar {
    position: relative;
    z-index: 5;
}

.rdp-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(10,132,255,.12), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(240,136,62,.10), transparent 30%),
        #05070a;
    display: grid;
    place-items: center;
    outline: none;
    contain: layout paint;
}

.rdp-display-shell {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: none;
    background:
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%),
        #05070a;
    background-size: 28px 28px;
    background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}

.rdp-display {
    position: relative;
    min-width: 1px;
    min-height: 1px;
    display: grid;
    place-items: center;
    transform-origin: center center;
}

.rdp-display-element {
    display: block;
    transform-origin: 0 0;
    outline: none;
}

.rdp-display canvas,
.rdp-display img {
    image-rendering: auto;
    max-width: none;
    max-height: none;
}

.rdp-stage .terminal-overlay {
    z-index: 10;
}

.rdp-stage .terminal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.rdp-mobile-keyboard-input {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    opacity: 0.01;
    color: transparent;
    background: transparent;
    resize: none;
    outline: none;
    caret-color: transparent;
    pointer-events: none;
}

.rdp-floating-panel {
    position: absolute;
    z-index: 30;
    min-width: 300px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid rgba(139,148,158,.34);
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, rgba(255,255,255,.12)), color-mix(in srgb, var(--surface) 82%, transparent)),
        color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 28px 90px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(28px) saturate(1.62);
    -webkit-backdrop-filter: blur(28px) saturate(1.62);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.985);
    transition:
        opacity .24s ease,
        visibility .24s ease,
        transform .34s cubic-bezier(.16,1,.3,1),
        box-shadow .24s ease,
        left .34s cubic-bezier(.16,1,.3,1),
        top .34s cubic-bezier(.16,1,.3,1),
        width .34s cubic-bezier(.16,1,.3,1),
        height .34s cubic-bezier(.16,1,.3,1);
}

.rdp-floating-panel[hidden] {
    display: flex !important;
    pointer-events: none;
}

.rdp-floating-panel.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.rdp-floating-panel.front {
    z-index: 42;
    box-shadow: 0 34px 110px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.13);
}

.rdp-floating-panel.front-switching {
    animation: panelFrontSwitch .28s cubic-bezier(.2,.8,.2,1);
}

.rdp-floating-panel.dragging,
.rdp-floating-panel.resizing {
    transition: none;
    user-select: none;
    touch-action: none;
}

.rdp-floating-panel.layout-animating {
    transition:
        left .62s var(--ios-open),
        top .62s var(--ios-open),
        width .62s var(--ios-open),
        height .62s var(--ios-open),
        transform .72s var(--ios-bounce),
        opacity .2s ease;
}

.rdp-floating-panel .panel-drag-handle {
    height: 30px;
    background: color-mix(in srgb, var(--border) 30%, rgba(255,255,255,.08));
}

.rdp-panel-content {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.rdp-panel-head,
.rdp-panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rdp-panel-head strong {
    font-size: 14px;
}

.rdp-panel-head .icon-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

.rdp-panel-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.rdp-panel-textarea {
    width: 100%;
    min-height: 76px;
    max-height: 160px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.45;
    outline: none;
    resize: vertical;
    user-select: text;
    -webkit-user-select: text;
}

.rdp-panel-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,.12);
}

.rdp-panel-textarea[readonly] {
    color: color-mix(in srgb, var(--text) 88%, var(--text-secondary));
}

.rdp-panel-hint {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.rdp-panel-hint[data-level="success"] {
    color: var(--success);
}

.rdp-panel-hint[data-level="warning"] {
    color: var(--warning);
}

.rdp-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.rdp-shortcut-grid .tool-btn {
    min-width: 0;
    width: 100%;
    min-height: 34px;
    padding: 6px 7px;
    font-size: 11px;
    background: var(--bg);
}

@media (max-width: 480px) and (pointer: coarse) {
    .rdp-page .terminal-topbar {
        padding: 6px 10px;
    }

    .rdp-stage {
        margin: 4px;
        border-radius: 10px;
    }

    .rdp-display-shell {
        place-items: center;
    }

    .rdp-floating-panel {
        min-width: 260px;
        min-height: 220px;
        border-radius: 18px;
    }

    .rdp-panel-content {
        padding: 10px;
    }

    .rdp-panel-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .rdp-panel-actions .btn-sm {
        flex: 1 1 auto;
    }

    .rdp-shortcut-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .rdp-shortcut-grid .tool-btn {
        min-height: 36px;
        padding-inline: 5px;
    }

    .rdp-panel-textarea {
        min-height: 68px;
        max-height: 120px;
        font-size: 12px;
    }
}

.smartbar-trash-target {
    position: fixed;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 1001;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1px solid rgba(248,81,73,.42);
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), transparent 34%), linear-gradient(180deg, rgba(248,81,73,.28), rgba(248,81,73,.13));
    color: #ffb4ad;
    box-shadow: 0 24px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 18px, 0) scale(.72);
    transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .22s ease, background .22s ease, box-shadow .22s ease;
}
.smartbar-dragging-dock .smartbar-trash-target {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
}
.smartbar-trash-target span { font-size: 38px; line-height: .9; font-weight: 300; transform: translateY(-2px); }
.smartbar-trash-target.hover,
body.smartbar-trash-hover .smartbar-trash-target {
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.30), transparent 34%), linear-gradient(180deg, rgba(248,81,73,.48), rgba(248,81,73,.22));
    box-shadow: 0 28px 80px rgba(248,81,73,.25), 0 0 0 7px rgba(248,81,73,.13), inset 0 1px 0 rgba(255,255,255,.20);
    transform: translate3d(-50%, -6px, 0) scale(1.12);
}
.smartbar-drag-ghost {
    transition: filter .12s ease, opacity .12s ease;
    will-change: transform, left, top;
}
.smartbar-drag-ghost-closing {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(.28) !important;
    filter: blur(8px) saturate(.6) !important;
}
.terminal-window.dock-drop-target::after {
    content: '释放以替换此窗口';
    position: absolute;
    inset: 10px;
    z-index: 6;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(10,132,255,.72);
    border-radius: 18px;
    background: rgba(10,132,255,.10);
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
    animation: dockDropTargetPulse .82s cubic-bezier(.16,1,.3,1) infinite alternate;
}
@keyframes dockDropTargetPulse {
    from { opacity: .72; transform: scale(.992); }
    to { opacity: 1; transform: scale(1); }
}

/* Android-style floating panel open/close motion */
.file-manager,
.docker-panel,
.info-modal,
.rdp-floating-panel,
.snippet-panel,
.shortcut-panel {
    --panel-origin-x: 50%;
    --panel-origin-y: 0%;
    transform-origin: var(--panel-origin-x) var(--panel-origin-y);
}
.file-manager.panel-opening,
.ai-agent-panel.panel-opening,
.docker-panel.panel-opening,
.info-modal.panel-opening,
.rdp-floating-panel.panel-opening,
.snippet-panel.panel-opening,
.shortcut-panel.panel-opening {
    animation: floatingPanelOpenFromButton .36s cubic-bezier(.16, 1, .3, 1) both;
}
.file-manager.panel-closing,
.ai-agent-panel.panel-closing,
.docker-panel.panel-closing,
.info-modal.panel-closing,
.rdp-floating-panel.panel-closing,
.snippet-panel.panel-closing,
.shortcut-panel.panel-closing {
    animation: floatingPanelCloseToButton .28s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes floatingPanelOpenFromButton {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(.82);
        filter: blur(10px) saturate(.9);
        border-radius: 30px;
    }
    62% {
        opacity: 1;
        transform: translate3d(0, -3px, 0) scale(1.018);
        filter: blur(0) saturate(1.04);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}
@keyframes floatingPanelCloseToButton {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(.86);
        filter: blur(8px) saturate(.88);
        border-radius: 30px;
    }
}

/* macOS-like terminal window layout morph */
.terminal-workspace.terminal-layout-morphing {
    contain: layout paint;
}
.terminal-workspace.terminal-layout-morphing .terminal-window {
    will-change: transform, filter, box-shadow;
    transform-origin: top left;
}
.terminal-window.layout-morphing .terminal-frame,
.terminal-window.layout-morphing .terminal-placeholder {
    pointer-events: none;
}
.terminal-window.layout-morphing .terminal-window-body {
    filter: saturate(.96) brightness(.98);
}

/* SSH snippets and shortcut floating panels */
.snippet-panel,
.shortcut-panel {
    position: absolute;
    top: 64px;
    left: 42px;
    width: min(460px, calc(100vw - 24px));
    height: min(520px, 62vh);
    min-width: 300px;
    min-height: 240px;
    display: none;
    flex-direction: column;
    z-index: 30;
    border: 1px solid rgba(139,148,158,.34);
    border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, rgba(255,255,255,.1)), color-mix(in srgb, var(--surface) 84%, transparent));
    box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(28px) saturate(1.55);
    -webkit-backdrop-filter: blur(28px) saturate(1.55);
    overflow: hidden;
    opacity: 0;
    transform: perspective(1200px) scale(.78) translate3d(0, 32px, 0);
    transform-origin: top center;
    filter: blur(8px);
    transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .28s ease, filter .32s ease;
    will-change: transform, opacity, filter;
}
.shortcut-panel { width: min(420px, calc(100vw - 24px)); height: min(360px, 46vh); }
.snippet-panel.open,
.shortcut-panel.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}
.snippet-panel.front,
.shortcut-panel.front { z-index: 47; }
.snippet-panel.dragging,
.snippet-panel.resizing,
.shortcut-panel.dragging,
.shortcut-panel.resizing { transition: none; user-select: none; touch-action: none; }
.snippet-panel.layout-animating,
.shortcut-panel.layout-animating {
    transition: left .62s var(--ios-open), top .62s var(--ios-open), width .62s var(--ios-open), height .62s var(--ios-open), transform .72s var(--ios-bounce), opacity .28s ease, filter .32s ease;
}
.snippet-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 68%, transparent); }
.snippet-panel-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; padding: 12px; overflow: hidden; }
.snippet-search { width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); outline: none; }
.snippet-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.12); }
.snippet-list { display: grid; gap: 8px; overflow: auto; min-height: 0; }
.snippet-item { display: grid; gap: 4px; text-align: left; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--bg) 86%, transparent); color: var(--text); cursor: pointer; }
.snippet-item:hover { border-color: rgba(10,132,255,.42); background: rgba(10,132,255,.12); transform: translateY(-1px); }
.snippet-item em, .snippet-settings-item em { color: var(--text-secondary); font-size: 11px; font-style: normal; }
.snippet-item code, .snippet-settings-item code { display: block; max-height: 72px; overflow: hidden; white-space: pre-wrap; color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; }
.snippet-empty { color: var(--text-secondary); font-size: 12px; }
.shortcut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 12px; overflow: auto; }
.shortcut-grid .tool-btn { min-width: 0; width: 100%; min-height: 36px; padding-inline: 6px; font-size: 11px; }
.shortcut-grid .fn-key,
.rdp-shortcut-grid .tool-btn[data-keyseq^="f"] { order: 20; }
.snippet-form { max-width: min(760px, 100%); }
.snippet-form .form-actions { gap: 16px; margin-top: 14px; }
.snippet-settings-list { display: grid; gap: 10px; margin-top: 12px; }
.snippet-settings-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
@media (max-width: 480px) and (pointer: coarse) {
    .snippet-settings-item { grid-template-columns: 1fr; }
    .shortcut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== 移动端终端全屏 Dock 与键盘控制：仅触控窄屏生效 ===== */
.mobile-fullscreen-dock-toggle { display: none; }
.smartbar-exit-fullscreen { display: none; }
.cmd-keyboard-btn { display: none; }

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-handle {
        display: none;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle {
        position: fixed;
        top: max(7px, env(safe-area-inset-top));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        z-index: 96;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 72%, transparent);
        box-shadow: 0 14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.22);
        backdrop-filter: blur(18px) saturate(1.55);
        -webkit-backdrop-filter: blur(18px) saturate(1.55);
        pointer-events: auto;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-secondary) 76%, transparent);
        box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 14px rgba(10,132,255,.22);
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(54px, calc(env(safe-area-inset-top) + 54px));
        right: max(8px, env(safe-area-inset-right));
        left: auto;
        width: 92px;
        height: auto;
        z-index: 94;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        top: 0;
        right: 0;
        left: auto;
        width: 84px;
        max-width: 84px;
        max-height: calc(100dvh - 120px);
        padding: 10px 8px;
        border-radius: 28px;
        transform-origin: top right;
        transform: translate3d(18px, -12px, 0) scale3d(.34, .18, 1);
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
    body.terminal-custom-fullscreen-open .smartbar-panel .smartbar-dock,
    body.terminal-custom-fullscreen-open .smartbar-dock {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 0;
        max-height: calc(100dvh - 142px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 6px 4px;
        gap: 10px;
        scroll-padding-block: 18px;
    }
    body.terminal-custom-fullscreen-open .smartbar-session,
    body.terminal-custom-fullscreen-open .smartbar-add,
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen {
        width: 60px;
        min-width: 60px;
        min-height: 64px;
        padding: 0;
    }
    body.terminal-custom-fullscreen-open .smartbar-session-icon,
    body.terminal-custom-fullscreen-open .smartbar-add-icon,
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen span {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }
    body.terminal-custom-fullscreen-open .smartbar-session-label,
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen strong {
        max-width: 62px;
    }
    body.terminal-custom-fullscreen-open .smartbar-session-label-img {
        max-width: 62px;
        height: 13px;
    }
    body.terminal-custom-fullscreen-open .smartbar-session.active::after {
        left: 3px;
        top: 24px;
        bottom: auto;
        transform: translateY(-50%);
    }
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        gap: 5px;
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
    }
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen span {
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
        border: 1px solid rgba(139,148,158,.24);
        color: var(--accent-hover);
        font-size: 24px;
        font-weight: 900;
        box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.16);
    }
    body.terminal-custom-fullscreen-open .smartbar-picker {
        right: auto !important;
        top: max(72px, env(safe-area-inset-top)) !important;
        width: min(340px, calc(100vw - 40px));
        min-height: 260px;
        max-height: calc(100dvh - 96px);
        transform-origin: var(--smartbar-picker-origin-x, 50%) 20px;
    }

    .terminal-page .cmd-keyboard-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-width: 38px;
        height: 34px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text);
        font-size: 17px;
        font-weight: 800;
    }
    .terminal-page .cmd-keyboard-btn.keyboard-visible {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        font-size: 22px;
        line-height: 1;
    }
    .terminal-page .cmd-input[readonly] {
        caret-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }
    .terminal-page .terminal-container {
        flex-basis: 0;
        height: auto;
        max-height: none;
        margin-bottom: 4px;
    }
    html.keyboard-open .terminal-page .terminal-container {
        flex: 0 1 calc(100dvh - var(--keyboard-inset, 0px) - 116px - env(safe-area-inset-top));
        max-height: calc(100dvh - var(--keyboard-inset, 0px) - 116px - env(safe-area-inset-top));
    }
    html.keyboard-open .terminal-page .wterm-wrapper {
        max-height: 100%;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact:not(.custom-fullscreen) .mobile-fullscreen-dock-toggle {
        position: absolute;
        top: 10px;
        right: max(14px, env(safe-area-inset-right));
        z-index: 35;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 74%, transparent);
        box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.24);
        backdrop-filter: blur(18px) saturate(1.55);
        -webkit-backdrop-filter: blur(18px) saturate(1.55);
        pointer-events: auto;
    }
    .terminal-workspace.compact:not(.custom-fullscreen) .mobile-fullscreen-dock-toggle span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-secondary) 78%, transparent);
        box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 14px rgba(10,132,255,.20);
    }
    .terminal-workspace.compact:not(.custom-fullscreen) .terminal-window-titlebar {
        padding-right: 54px;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body:has(.terminal-page),
    body:has(.rdp-page) {
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        min-height: 100dvh;
        overflow: auto;
    }
    body.app-body.terminal-mode {
        overflow: hidden;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "input"
            "term"
            "tools";
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        position: fixed;
        inset: 0;
    }
    .terminal-page .terminal-input-panel {
        position: relative;
        grid-area: input;
        order: unset;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 1px 0 var(--border);
        padding-bottom: 0;
        transform: none !important;
    }
    .terminal-page .terminal-container {
        grid-area: term;
        order: unset;
        min-height: 0;
        height: auto;
        margin: 5px 8px;
        align-self: stretch;
        overflow: hidden;
        contain: layout paint;
    }
    .terminal-page .terminal-topbar {
        grid-area: tools;
        order: unset;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 6px 8px max(6px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        box-shadow: 0 -1px 0 rgba(255,255,255,.08);
    }
    .terminal-page .terminal-topbar .status,
    .terminal-page .terminal-topbar .info {
        display: none;
    }
    .terminal-page .topbar-actions {
        flex: 1 1 auto;
        order: unset;
        flex-basis: auto;
        margin: 0;
        padding: 0 2px;
        gap: 7px;
        width: 100%;
    }
    .terminal-page .topbar-actions .btn-sm {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 14px;
        font-size: 0;
        gap: 0;
    }
    .terminal-page .topbar-actions .btn-sm::before {
        content: attr(data-mobile-icon);
        font-size: 18px;
        line-height: 1;
    }
    .terminal-page .topbar-actions .wterm-theme-toggle {
        min-width: 38px;
    }
    html.keyboard-open .terminal-page {
        grid-template-rows: auto minmax(0, calc(100dvh - var(--keyboard-inset, 0px) - 56px)) auto;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }
    html.keyboard-open .terminal-page .terminal-container {
        flex: unset;
        max-height: none;
        height: auto;
    }
    html.keyboard-open .terminal-page .terminal-topbar {
        display: none;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle {
        position: fixed;
        top: max(7px, env(safe-area-inset-top));
        right: 50%;
        transform: translateX(50%);
        z-index: 1004;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 74%, transparent);
        box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.24);
        backdrop-filter: blur(18px) saturate(1.55);
        -webkit-backdrop-filter: blur(18px) saturate(1.55);
        pointer-events: auto;
    }
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-secondary) 78%, transparent);
        box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 14px rgba(10,132,255,.20);
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions #reconnectBtn,
    .terminal-page .topbar-actions #disconnectBtn {
        display: none !important;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window > .mobile-fullscreen-dock-toggle {
        position: absolute;
        top: 4px;
        right: 10px;
        z-index: 60;
        display: grid;
        place-items: center;
        width: 40px;
        height: 28px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 76%, transparent);
        box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.26);
        backdrop-filter: blur(18px) saturate(1.55);
        -webkit-backdrop-filter: blur(18px) saturate(1.55);
        pointer-events: auto;
    }
    .terminal-window > .mobile-fullscreen-dock-toggle span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-secondary) 78%, transparent);
        box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 14px rgba(10,132,255,.20);
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: 4px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        position: absolute;
        z-index: 70;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact.custom-fullscreen .terminal-smartbar.open,
    body.terminal-custom-fullscreen-open .terminal-smartbar.open {
        display: block !important;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .terminal-container .wterm-wrapper.wterm {
        height: 100% !important;
        min-height: 0 !important;
        contain: layout paint style;
    }
    .terminal-page .terminal-container .wterm-wrapper .term-grid {
        min-height: 0 !important;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm::before {
        content: '';
        position: relative;
        display: block;
        width: 21px;
        height: 21px;
        font-size: 0;
        background: currentColor;
        -webkit-mask: var(--mobile-icon-mask) center / contain no-repeat;
        mask: var(--mobile-icon-mask) center / contain no-repeat;
    }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v1H3V6zm0 4h18l-2 9H5l-2-9z'/%3E%3C/svg%3E"); color: #d7a21f; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V4h16v2H6v12h14v2H4zm3-3V9h3v8H7zm5 0V6h3v11h-3zm5 0v-5h3v5h-3z'/%3E%3C/svg%3E"); color: #4aa3df; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 13h18c-.6 4-3.8 7-8.8 7C7.5 20 4 17.8 3 13zm2-5h3v3H5V8zm4 0h3v3H9V8zm4 0h3v3h-3V8zM9 4h3v3H9V4zm4 0h3v3h-3V4zm4 4h3v3h-3V8z'/%3E%3C/svg%3E"); color: #2aa9c9; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7z'/%3E%3C/svg%3E"); color: #d9aa18; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E"); color: #6b7684; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7V3h14v14h-4v4H3V7h4zm2 0h8v8h2V5H9v2zm-4 2v10h10V9H5z'/%3E%3C/svg%3E"); color: #7a6042; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h3v16H5V5h3l1-2zm1 4h4l1-2h-6l1 2zm-3 1v11h10V8h-2v2H9V8H7z'/%3E%3C/svg%3E"); color: #9a6a3a; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3C/svg%3E"); color: #5b6672; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9 9 0 1 0 9 9c-1 4-5 7-9 7V2z'/%3E%3C/svg%3E"); color: #246f88; }
    .terminal-page .cmd-keyboard-btn::before {
        content: '';
        width: 22px;
        height: 22px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .terminal-page .cmd-keyboard-btn.keyboard-visible::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 16-7-7h14l-7 7z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 16-7-7h14l-7 7z'/%3E%3C/svg%3E");
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm {
        color: transparent !important;
        overflow: hidden;
        text-indent: -9999px;
    }
    .terminal-page .topbar-actions .btn-sm::before {
        text-indent: 0;
        color: inherit;
        flex: 0 0 auto;
    }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"]::before { background: #d7a21f; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"]::before { background: #4aa3df; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"]::before { background: #2aa9c9; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"]::before { background: #d9aa18; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"]::before { background: #6b7684; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"]::before { background: #7a6042; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"]::before { background: #9a6a3a; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"]::before { background: #5b6672; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"]::before { background: #246f88; }
}

.mobile-secure-keyboard-proxy {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0.01;
    color: transparent;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    outline: none;
    caret-color: transparent;
    z-index: -1;
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm {
        position: relative;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        letter-spacing: 0 !important;
        overflow: hidden !important;
        text-indent: 0 !important;
        white-space: nowrap;
    }
    .terminal-page .topbar-actions .btn-sm::before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .terminal-smartbar,
    .terminal-workspace.compact.custom-fullscreen ~ .terminal-smartbar,
    .terminal-smartbar.open {
        display: block !important;
        pointer-events: none;
    }
    .terminal-smartbar.open .smartbar-panel {
        pointer-events: auto;
    }
}

/* 移除移动端手动键盘按钮/安全键盘代理后的最终覆盖 */
.cmd-keyboard-btn,
.mobile-secure-keyboard-proxy { display: none !important; }

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    html.keyboard-open .terminal-page {
        height: 100dvh;
        max-height: 100dvh;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    html.keyboard-open .terminal-page .terminal-topbar {
        display: flex;
    }
    html.keyboard-open .terminal-page .terminal-input-panel {
        transform: none !important;
    }
    html.keyboard-open .terminal-page .terminal-container {
        height: auto !important;
        max-height: none !important;
        min-height: 0;
    }
    html.keyboard-open .terminal-page .wterm-wrapper {
        max-height: none !important;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .terminal-container .wterm-wrapper.wterm,
    .terminal-page .terminal-container .wterm-wrapper {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        overflow-anchor: none;
    }
}

/* ===== 修正：桌面端保留文字，移动端才隐藏为图标 ===== */
.terminal-page .topbar-actions .btn-sm {
    font-size: 12px;
    line-height: 1.2;
    color: var(--text);
    -webkit-text-fill-color: currentColor;
    text-indent: 0;
}
.terminal-page .topbar-actions .btn-sm::before {
    content: none;
}
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    .terminal-page .topbar-actions .btn-sm::before {
        content: '';
        display: block;
    }
}

/* ===== 独立移动端竖排 Dock：从小圆点中心展开，不污染桌面 Dock ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        position: fixed;
        top: max(42px, calc(env(safe-area-inset-top) + 42px));
        left: 50%;
        right: auto;
        width: 86px;
        transform: translateX(-50%);
        z-index: 1002;
        pointer-events: none;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        position: static;
        width: 86px;
        max-width: 86px;
        min-height: 0;
        max-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
        padding: 9px 7px;
        border-radius: 28px;
        transform-origin: 50% -22px;
        transform: translate3d(0, -16px, 0) scale3d(.22, .08, 1);
        opacity: 0;
        pointer-events: none;
        transition:
            transform .46s cubic-bezier(.16, 1, .3, 1),
            opacity .24s ease,
            filter .38s ease;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        opacity: 1;
        pointer-events: auto;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-dock {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-height: calc(100dvh - 98px - env(safe-area-inset-bottom));
        overflow-y: auto;
        overflow-x: hidden;
        gap: 10px;
        padding: 6px 2px;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session,
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-add {
        width: 64px;
        min-width: 64px;
        height: auto;
        min-height: 66px;
        flex: 0 0 auto;
        padding: 0;
        flex-direction: column;
        gap: 5px;
        transform: translate3d(var(--dock-shift, 0px), var(--dock-lift, 0px), 0) scale(var(--dock-scale, 1)) rotateZ(var(--dock-rotate, 0deg));
        transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .22s ease, opacity .18s ease;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session-icon,
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-add-icon {
        width: 50px;
        height: 50px;
        border-radius: 18px;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session-label {
        display: flex;
        max-width: 66px;
        line-height: 1.1;
        text-align: center;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session-label-img {
        max-width: 66px;
        height: 13px;
    }
}

/* ===== 桌面端工具栏：文字 + CSS 图标，移动端仍保持纯图标 ===== */
.terminal-page .topbar-actions .btn-sm[data-mobile-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.terminal-page .topbar-actions .btn-sm[data-mobile-icon]::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background: currentColor;
    -webkit-mask: var(--terminal-toolbar-icon) center / contain no-repeat;
    mask: var(--terminal-toolbar-icon) center / contain no-repeat;
}
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v1H3V6zm0 4h18l-2 9H5l-2-9z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V4h16v2H6v12h14v2H4zm3-3V9h3v8H7zm5 0V6h3v11h-3zm5 0v-5h3v5h-3z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 13h18c-.6 4-3.8 7-8.8 7C7.5 20 4 17.8 3 13zm2-5h3v3H5V8zm4 0h3v3H9V8zm4 0h3v3h-3V8zM9 4h3v3H9V4zm4 0h3v3h-3V4zm4 4h3v3h-3V8z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7V3h14v14h-4v4H3V7h4zm2 0h8v8h2V5H9v2zm-4 2v10h10V9H5z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h3v16H5V5h3l1-2zm1 4h4l1-2h-6l1 2zm-3 1v11h10V8h-2v2H9V8H7z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9 9 0 1 0 9 9c-1 4-5 7-9 7V2z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="reconnect"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.76-4.24L13 11h8V3l-3.3 3.3z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="disconnect"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v2H7V3zm4 4h2v7h-2V7zm-5.6 3.2 1.5 1.3A6 6 0 1 0 17.1 11.5l1.5-1.3a8 8 0 1 1-13.2 0z'/%3E%3C/svg%3E"); }
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon] {
        gap: 0;
    }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon]::before {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }
}

/* ===== 最终修复：移动端图标不要继承透明文字色，使用明确颜色 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon]::before {
        content: '' !important;
        display: block !important;
        width: 21px !important;
        height: 21px !important;
        flex: 0 0 21px !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        background: var(--mobile-icon-color, currentColor) !important;
        color: var(--mobile-icon-color, currentColor) !important;
        -webkit-text-fill-color: var(--mobile-icon-color, currentColor) !important;
        -webkit-mask: var(--mobile-icon-mask, var(--terminal-toolbar-icon)) center / contain no-repeat !important;
        mask: var(--mobile-icon-mask, var(--terminal-toolbar-icon)) center / contain no-repeat !important;
    }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"] { --mobile-icon-color: #d7a21f; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"] { --mobile-icon-color: #4aa3df; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"] { --mobile-icon-color: #2aa9c9; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"] { --mobile-icon-color: #d9aa18; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"] { --mobile-icon-color: #6b7684; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"] { --mobile-icon-color: #7a6042; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"] { --mobile-icon-color: #9a6a3a; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"] { --mobile-icon-color: #5b6672; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"] { --mobile-icon-color: #246f88; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="reconnect"] { --mobile-icon-color: #0a84ff; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="disconnect"] { --mobile-icon-color: #f85149; }
}

/* ===== 桌面端工具栏图标也使用与移动端一致的彩色图标 ===== */
.terminal-page .topbar-actions .btn-sm[data-mobile-icon]::before {
    background: var(--toolbar-icon-color, currentColor);
}
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"] { --toolbar-icon-color: #d7a21f; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"] { --toolbar-icon-color: #4aa3df; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"] { --toolbar-icon-color: #2aa9c9; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"] { --toolbar-icon-color: #d9aa18; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"] { --toolbar-icon-color: #6b7684; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"] { --toolbar-icon-color: #7a6042; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"] { --toolbar-icon-color: #9a6a3a; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"] { --toolbar-icon-color: #5b6672; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"] { --toolbar-icon-color: #246f88; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="reconnect"] { --toolbar-icon-color: #0a84ff; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="disconnect"] { --toolbar-icon-color: #f85149; }

/* ===== 移动端全屏小圆点：移进顶部分界线区域，并保持右上角展开 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(2px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        left: auto !important;
        width: 40px !important;
        height: 28px !important;
        transform: none !important;
        position: fixed !important;
        z-index: 1006 !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(34px, calc(env(safe-area-inset-top) + 34px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        left: auto !important;
        transform: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        transform-origin: calc(100% - 22px) -16px !important;
    }
}

/* ===== 移动端 Dock 最终交互修正：小圆点等大、去椭圆框、Picker 在 Dock 左侧 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(7px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        width: 42px !important;
        height: 22px !important;
        border: 1px solid rgba(139,148,158,.20) !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--surface) 72%, rgba(0,0,0,.10)) !important;
        box-shadow: 0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
        backdrop-filter: blur(18px) saturate(1.22) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle span,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle span,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle span {
        width: 5px !important;
        height: 5px !important;
        border-radius: 50% !important;
        background: color-mix(in srgb, var(--text-secondary) 72%, transparent) !important;
        box-shadow: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(34px, calc(env(safe-area-inset-top) + 34px)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        left: auto !important;
        width: 92px !important;
        transform: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        transform-origin: calc(100% - 27px) -11px !important;
    }
    body.terminal-custom-fullscreen-open .smartbar-picker {
        right: auto !important;
        top: max(64px, calc(env(safe-area-inset-top) + 64px)) !important;
        width: min(340px, calc(100vw - 40px)) !important;
        min-height: 260px !important;
        max-height: calc(100dvh - 88px) !important;
        z-index: 1010 !important;
        pointer-events: auto !important;
    }
}

/* 移动端未全屏时不显示右上角 Dock 小点 */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact:not(.custom-fullscreen) .mobile-fullscreen-dock-toggle {
        display: none !important;
    }
}

/* ===== 移动 Dock 对齐和触屏手感修正 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(12px, env(safe-area-inset-top)) !important;
        right: max(22px, env(safe-area-inset-right)) !important;
        width: 42px !important;
        height: 22px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(42px, calc(env(safe-area-inset-top) + 42px)) !important;
        right: max(16px, env(safe-area-inset-right)) !important;
        width: 92px !important;
        pointer-events: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        pointer-events: auto !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-dock {
        touch-action: manipulation !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session,
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-add {
        touch-action: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: transform .22s cubic-bezier(.16,1,.3,1), filter .22s ease, opacity .18s ease !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-add {
        touch-action: manipulation !important;
    }
    .terminal-smartbar:not(.open) .smartbar-panel {
        pointer-events: none !important;
    }
}

/* ===== 移动全屏小圆点：圆形外层 + 与标题栏三点同源岛动画 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        width: 34px !important;
        height: 34px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(139,148,158,.20) !important;
        background:
            radial-gradient(circle at 50% 12%, rgba(255,255,255,.16), transparent 42%),
            linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
            color-mix(in srgb, var(--surface) 72%, rgba(0,0,0,.20)) !important;
        box-shadow:
            0 3px 10px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.08) !important;
        backdrop-filter: blur(18px) saturate(1.22) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
        transition:
            transform .24s cubic-bezier(.34,1.56,.64,1),
            border-color .24s ease,
            background .24s ease,
            box-shadow .36s ease,
            opacity .12s ease,
            backdrop-filter .24s ease,
            -webkit-backdrop-filter .24s ease !important;
        touch-action: none !important;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle:active,
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle.is-pressing,
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle.is-pressing {
        transform: translateY(-50%) scale(.94) !important;
        border-color: rgba(10,132,255,.36) !important;
        box-shadow:
            0 6px 16px rgba(0,0,0,.20),
            0 0 0 3px rgba(10,132,255,.07) !important;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle span,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle span,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle span {
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
        background: color-mix(in srgb, var(--text-secondary) 72%, transparent) !important;
        box-shadow: 0 0 9px rgba(255,255,255,.08) !important;
        transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .18s ease, background-color .18s ease !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        border-radius: 22px !important;
        transform-origin: calc(100% - 25px) -18px !important;
        transform: translate3d(18px, -18px, 0) scale3d(.22, .10, 1) !important;
        opacity: 0;
        transition:
            transform .52s cubic-bezier(0.32, 0.72, 0, 1),
            width .52s cubic-bezier(0.32, 0.72, 0, 1),
            height .52s cubic-bezier(0.32, 0.72, 0, 1),
            border-radius .52s cubic-bezier(0.32, 0.72, 0, 1),
            opacity .12s ease !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
        opacity: 1 !important;
        border-radius: 28px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.closing .smartbar-panel {
        transform: translate3d(18px, -18px, 0) scale3d(.22, .10, 1) !important;
        opacity: 0 !important;
        border-radius: 999px !important;
        transition:
            transform .42s cubic-bezier(0.4, 0, 0.6, 1),
            border-radius .42s cubic-bezier(0.4, 0, 0.6, 1),
            opacity .18s ease .16s !important;
    }
}

/* ===== 最终：小圆点与标题栏三点同线，Dock 打开时 iframe 不抢触摸 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: max(24px, env(safe-area-inset-right)) !important;
        width: 34px !important;
        height: 34px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open ~ .terminal-workspace .terminal-frame,
    body.terminal-custom-fullscreen-open .terminal-smartbar.open + .terminal-frame {
        pointer-events: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(50px, calc(env(safe-area-inset-top) + 50px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
    }
}

/* ===== 最终对齐：小圆点挂在标题栏内，和三点同一水平线一起出现 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        z-index: 72 !important;
        display: grid !important;
        place-items: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 999px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-window-titlebar > .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        display: grid !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(40px, calc(env(safe-area-inset-top) + 40px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
    }
}

/* ===== 缩小移动全屏小圆点一圈，并继续对齐标题栏 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle,
    body.terminal-custom-fullscreen-open .terminal-window-titlebar > .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window-titlebar > .mobile-fullscreen-dock-toggle,
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        width: 28px !important;
        height: 28px !important;
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        border-radius: 999px !important;
    }
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle span,
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle span {
        width: 6px !important;
        height: 6px !important;
    }
}

/* 稳健版：每个标题栏自带小圆点，只显示 active 全屏窗口那一个 */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: none !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: grid !important;
    }
}

/* 删除旧版被搬运到窗口主体里的小圆点，只保留标题栏右上角那个 */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window > .mobile-fullscreen-dock-toggle {
        display: none !important;
    }
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: none !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: grid !important;
    }
}

/* ===== 终版：全局隐藏所有旧小圆点，只允许 active 标题栏右上角一个显示 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .mobile-fullscreen-dock-toggle {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: grid !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
        z-index: 72 !important;
        place-items: center !important;
        border-radius: 999px !important;
    }
}

.transfer-popover {
    position: fixed;
    z-index: 2000;
    display: none;
    max-height: min(420px, calc(100dvh - 80px));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 22px 70px rgba(0,0,0,.32);
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
}
.transfer-popover.open { display: flex; flex-direction: column; animation: transferPopoverIn .2s cubic-bezier(.16,1,.3,1); }
@keyframes transferPopoverIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.transfer-popover-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.transfer-popover-close { border: 0; background: transparent; color: var(--text-secondary); font-size: 18px; cursor: pointer; }
.transfer-popover-body { overflow: auto; padding: 8px; display: grid; gap: 8px; }
.transfer-empty { padding: 18px 10px; color: var(--text-secondary); text-align: center; font-size: 13px; }
.transfer-item { border: 1px solid var(--border); border-radius: 14px; padding: 9px 10px; background: color-mix(in srgb, var(--bg) 78%, transparent); }
.transfer-item-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.transfer-icon { flex: 0 0 auto; }
.transfer-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 650; }
.transfer-status { flex: 0 0 auto; color: var(--text-secondary); font-size: 12px; }
.transfer-progress { height: 5px; border-radius: 999px; overflow: hidden; background: rgba(139,148,158,.18); margin-top: 8px; }
.transfer-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transition: width .24s ease; }
.transfer-meta { margin-top: 5px; color: var(--text-secondary); font-size: 11px; }
.transfer-item.done .transfer-progress span { background: var(--success); }
.transfer-item.error .transfer-progress span { background: var(--danger); }
.transfer-item.indeterminate .transfer-progress span { animation: transferIndeterminate 1.15s ease-in-out infinite; }
@keyframes transferIndeterminate { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }

.fm-header.panel-titlebar .fm-transfer-btn {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    height: auto;
    min-height: auto;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-sans);
    transition: all 0.1s;
}
.fm-header.panel-titlebar .fm-transfer-btn > span {
    position: relative;
    width: 14px;
    height: 14px;
    display: block;
    color: var(--text-secondary);
}
.fm-transfer-btn > span::before,
.fm-transfer-btn > span::after { content: ''; position: absolute; border-radius: 50%; border: 2px solid currentColor; opacity: .9; }
.fm-transfer-btn > span::before { inset: 0; clip-path: polygon(0 0, 45% 0, 45% 100%, 0 100%); }
.fm-transfer-btn > span::after { inset: 0; clip-path: polygon(55% 0, 100% 0, 100% 100%, 55% 100%); }
.fm-transfer-btn > span > i,
.fm-transfer-btn > span > b { position: absolute; display: block; width: 5px; height: 9px; background: currentColor; }
.fm-transfer-btn > span > i { left: 3px; top: 3px; clip-path: polygon(25% 0, 75% 0, 75% 55%, 100% 55%, 50% 100%, 0 55%, 25% 55%); }
.fm-transfer-btn > span > b { right: 3px; top: 2px; clip-path: polygon(50% 0, 100% 45%, 75% 45%, 75% 100%, 25% 100%, 25% 45%, 0 45%); }
.fm-transfer-btn.transfer-active::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,.14);
}
.transfer-icon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 7px; position: relative; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.transfer-icon::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1.8px solid var(--accent); opacity: .9; }
.transfer-icon::after { content: ''; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; background: var(--accent); }
.transfer-icon.download::after { clip-path: polygon(30% 0, 70% 0, 70% 45%, 100% 45%, 50% 100%, 0 45%, 30% 45%); }
.transfer-icon.upload::after { clip-path: polygon(50% 0, 100% 55%, 70% 55%, 70% 100%, 30% 100%, 30% 55%, 0 55%); }
.transfer-meta { margin-top: 5px; color: var(--text-secondary); font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.transfer-actions { display: inline-flex; gap: 5px; flex-shrink: 0; }
.transfer-action { border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 11px; line-height: 1; padding: 4px 7px; cursor: pointer; min-width: 34px; text-align: center; box-sizing: border-box; }
.transfer-action:hover { border-color: var(--accent); color: var(--accent-hover); }
.transfer-action.danger:hover { border-color: var(--danger); color: var(--danger); }
.transfer-cancel-btn { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; position: relative; flex: 0 0 auto; opacity: .75; transition: opacity .15s, background .15s, color .15s; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; font-weight: 700; -webkit-appearance: none; appearance: none; }
.transfer-cancel-btn:hover { opacity: 1; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.transfer-cancel-btn span { display: block; transform: translateY(-1px); pointer-events: none; }
.transfer-cancel-btn::before,
.transfer-cancel-btn::after { content: none; }
.transfer-cancel-btn:not(:has(span))::before,
.transfer-cancel-btn:not(:has(span))::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.8px; background: currentColor; border-radius: 1px; pointer-events: none; }
.transfer-cancel-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.transfer-cancel-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }
.transfer-item.paused .transfer-progress span { background: var(--warning); }
.transfer-item.done .transfer-progress span { background: var(--success); }


.fm-context-menu { overflow-y: auto; overscroll-behavior: contain; }
.fm-props-overlay {
    position: fixed;
    inset: 0;
    z-index: 10030;
    opacity: 0;
    pointer-events: none;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity .22s ease;
}
.fm-props-overlay.show { opacity: 1; pointer-events: auto; }
.fm-props-modal {
    position: fixed;
    z-index: 10031;
    left: 50%;
    top: 50%;
    width: min(560px, calc(100vw - 32px));
    max-height: min(78vh, 620px);
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--border) 65%, rgba(255,255,255,.2));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -48%) scale(.96);
    transition: opacity .22s ease, transform .28s cubic-bezier(.18,1,.32,1);
}
.fm-props-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.fm-props-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fm-props-head strong { font-size: 18px; }
.fm-props-close { width: 32px; height: 32px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-size: 22px; line-height: 1; }
.fm-props-body { display: grid; gap: 10px; overflow: auto; padding-right: 2px; }
.fm-props-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: start; }
.fm-props-row span { color: var(--text-secondary); font-weight: 700; }
.fm-props-row code { min-width: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono); color: var(--text); background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; user-select: text; -webkit-user-select: text; }
.fm-props-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.fm-props-action { display: inline-flex; align-items: center; gap: 8px; }
.fm-props-action .fm-menu-icon { width: 18px; height: 18px; }
.fm-props-action .fm-menu-icon svg { width: 18px; height: 18px; }
.fm-props-action.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
@media (max-width: 520px) {
    .fm-props-modal { width: calc(100vw - 24px); padding: 16px; border-radius: 20px; }
    .fm-props-row { grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
    .fm-props-actions { justify-content: stretch; }
    .fm-props-action { flex: 1 1 auto; justify-content: center; }
}

.fm-conflict-overlay {
    position: fixed;
    inset: 0;
    z-index: 10040;
    opacity: 0;
    pointer-events: none;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity .22s ease;
}
.fm-conflict-overlay.show { opacity: 1; pointer-events: auto; }
.fm-conflict-modal {
    position: fixed;
    z-index: 10041;
    left: 50%;
    top: 50%;
    width: min(480px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--border) 65%, rgba(255,255,255,.2));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -48%) scale(.96);
    transition: opacity .22s ease, transform .28s cubic-bezier(.18,1,.32,1);
}
.fm-conflict-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.fm-conflict-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fm-conflict-head strong { font-size: 18px; }
.fm-conflict-close { width: 32px; height: 32px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-size: 22px; line-height: 1; }
.fm-conflict-body { display: grid; gap: 10px; }
.fm-conflict-choice {
    display: grid;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    color: var(--text);
}
.fm-conflict-choice b { font-size: 15px; }
.fm-conflict-choice span { color: var(--text-secondary); font-size: 13px; }
.fm-conflict-choice.primary { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.fm-conflict-choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.fm-conflict-remember { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-secondary); font-size: 13px; }
.fm-conflict-remember input { width: 16px; height: 16px; accent-color: var(--accent); }

.fm-editor-window-titlebar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: -4px -4px 6px;
    flex: 0 0 auto;
}
.fm-editor-window-titlebar .panel-traffic-btn {
    position: static;
    transform: none;
}
.fm-editor-save-icon {
    width: 34px;
    min-width: 34px;
    padding: 0;
    position: relative;
}
.fm-editor-save-icon span,
.fm-editor-save-icon::before,
.fm-editor-save-icon::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
}
.fm-editor-save-icon span {
    left: 8px;
    top: 6px;
    width: 18px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 3px;
}
.fm-editor-save-icon span::before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 2px;
    height: 6px;
    border: 1.6px solid currentColor;
    border-radius: 2px;
}
.fm-editor-save-icon span::after {
    content: '';
    position: absolute;
    right: 2px;
    top: -2px;
    width: 6px;
    height: 7px;
    background: currentColor;
    border-radius: 0 0 1px 1px;
}
.fm-editor-close-icon {
    width: 34px;
    min-width: 34px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}
.fm-editor-actions[hidden] { display: none !important; }

/* Refined editor titlebar and save icon */
.fm-editor-window-titlebar {
    margin: -4px -4px 8px;
    height: 34px;
    cursor: grab;
    touch-action: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.22), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, rgba(255,255,255,.10)), color-mix(in srgb, var(--surface) 74%, transparent));
    border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
}
.fm-editor-modal.dragging .fm-editor-window-titlebar { cursor: grabbing; }
.fm-editor-window-titlebar .panel-traffic-btn {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 10px 24px rgba(0,0,0,.18),
        0 0 0 1px color-mix(in srgb, var(--border) 36%, transparent);
}
.fm-editor-save-icon {
    color: var(--accent-hover);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    overflow: hidden;
}
.fm-editor-save-icon::before {
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(currentColor, currentColor) 10px 0 / 4px 6px no-repeat,
        linear-gradient(currentColor, currentColor) 4px 12px / 10px 2px no-repeat,
        linear-gradient(currentColor, currentColor) 4px 15px / 10px 2px no-repeat;
    box-shadow: inset 0 -7px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}
.fm-editor-save-icon::after {
    left: 7px;
    top: 6px;
    width: 8px;
    height: 5px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--surface) 82%, white);
    opacity: .95;
}
.fm-editor-save-icon span { display: none; }
.fm-editor-save-icon:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Editor close is handled by the file-manager-style layout menu; hide the extra top-right X. */
.fm-editor-close-icon { display: none !important; }
.fm-editor-modal.editor-window.layout-animating,
.image-preview-modal.layout-animating,
.media-preview-modal.layout-animating {
    transition:
        left .62s var(--ios-open),
        top .62s var(--ios-open),
        width .62s var(--ios-open),
        height .62s var(--ios-open),
        border-radius .42s ease,
        transform .72s var(--ios-bounce),
        opacity 0.28s ease,
        filter 0.32s ease;
}

/* User-provided macOS-style save icon */
.fm-editor-save-icon {
    color: #475569;
    background: color-mix(in srgb, var(--surface) 82%, rgba(255, 255, 255, 0.62));
    border: 1px solid color-mix(in srgb, var(--text) 18%, rgba(255, 255, 255, 0.5));
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fm-editor-save-icon::before,
.fm-editor-save-icon::after,
.fm-editor-save-icon span,
.fm-editor-save-icon span::before,
.fm-editor-save-icon span::after {
    content: none !important;
    display: none !important;
}
.fm-editor-save-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.2s ease;
}
.fm-editor-save-icon:hover {
    background: color-mix(in srgb, #ffffff 92%, var(--surface));
    color: #007aff;
    border-color: rgba(0, 122, 255, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 8px 20px rgba(0, 0, 0, 0.08);
    transform: scale(1.08) translateY(-2px);
}
.fm-editor-save-icon:active {
    transform: scale(0.95);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: none;
}


.rdp-touch-hud {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 42;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(5, 8, 12, .78);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.rdp-pointer {
    position: absolute;
    z-index: 41;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    border: 2px solid rgba(10,132,255,.95);
    border-radius: 50%;
    background: rgba(10,132,255,.18);
    box-shadow: 0 0 0 5px rgba(10,132,255,.16), 0 8px 18px rgba(0,0,0,.35);
    pointer-events: none;
    transform: translate3d(0,0,0);
}

.rdp-stage.keyboard-open .rdp-display-shell {
    padding-bottom: min(34vh, 260px);
    scroll-padding-bottom: min(34vh, 260px);
}

.joystick-panel {
    min-width: 248px;
    min-height: 220px;
}

.joystick-panel-content {
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}

.joystick-panel .panel-titlebar {
    width: 100%;
    justify-content: center;
}

.rdp-joystick {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    flex: 0 0 auto;
}

.rdp-joystick:active { cursor: grabbing; }

.rdp-joystick-around {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-image: linear-gradient(0deg, #44484d, #8d9499);
    box-shadow: 0 4px 12px rgba(0,0,0,.65);
}

.rdp-joystick-handle {
    width: 155px;
    height: 155px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #30363b;
    box-shadow:
        0 0 10px rgba(0,0,0,.75),
        0 10px 10px rgba(0,0,0,.45),
        inset 0 0 16px rgba(0,0,0,.95),
        inset 0 0 24px rgba(0,0,0,.85),
        inset 0 0 48px rgba(0,0,0,.45),
        inset 0 2px 2px rgba(255,255,255,.05);
    perspective: 300px;
    overflow: visible;
}

.rdp-joystick-knob {
    width: 102px;
    height: 102px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-image: linear-gradient(0deg, #4d555a, #c3c8cc);
    box-shadow:
        0 9px 14px rgba(0,0,0,.75),
        0 19px 8px -2px rgba(0,0,0,.45),
        0 33px 8px rgba(0,0,0,.65),
        0 -12px 10px rgba(255,255,255,.18),
        inset 0 3px 3px rgba(255,255,255,.28),
        inset 0 -3px 3px rgba(0,0,0,.45);
    transition: transform .08s linear, box-shadow .1s ease;
    will-change: transform;
    cursor: grab;
    position: relative;
}

.rdp-joystick-knob.smooth-back {
    transition: transform .2s cubic-bezier(.2,.9,.4,1.1), box-shadow .2s ease !important;
}

.rdp-joystick-inside {
    position: relative;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-image: linear-gradient(180deg, #5d666c, #a2abb0);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.35), inset 0 -3px 6px rgba(255,255,255,.12);
}

.rdp-joystick-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8ced2;
    box-shadow: 0 2px 2px rgba(0,0,0,.55), inset 0 -2px 2px rgba(0,0,0,.35);
}
.rdp-joystick-dot:nth-child(1) { left: 50%; top: 10%; }
.rdp-joystick-dot:nth-child(2) { left: 90%; top: 50%; }
.rdp-joystick-dot:nth-child(3) { left: 50%; top: 90%; }
.rdp-joystick-dot:nth-child(4) { left: 10%; top: 50%; }

.rdp-joystick-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 30px;
    fill: #8d9499;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.9));
    transition: fill .15s, filter .2s;
    pointer-events: none;
    z-index: 5;
}
.rdp-joystick-icon:nth-of-type(1) { top: -12%; left: 50%; }
.rdp-joystick-icon:nth-of-type(2) { top: 50%; left: 112%; }
.rdp-joystick-icon:nth-of-type(3) { top: 112%; left: 50%; }
.rdp-joystick-icon:nth-of-type(4) { top: 50%; left: -12%; }
.rdp-joystick-icon.active {
    fill: #ffb14f;
    filter: brightness(1.05) drop-shadow(0 0 4px rgba(255,177,79,.8)) drop-shadow(0 0 2px rgba(255,255,255,.5));
}

.joystick-hint {
    width: 100%;
    text-align: center;
    padding: 0 8px 4px;
    font-family: var(--font-mono);
}

@media (prefers-color-scheme: light) {
    .rdp-joystick-around { background-image: linear-gradient(0, #f5f8fa, #9da4a8); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
    .rdp-joystick-handle { background: #c5d1da; box-shadow: 0 0 10px rgba(0,0,0,.5), 0 10px 10px rgba(0,0,0,.2), inset 0 0 16px rgba(0,0,0,.85), inset 0 0 24px rgba(0,0,0,.75), inset 0 0 48px rgba(0,0,0,.2); }
    .rdp-joystick-knob { background-image: linear-gradient(0, #86969c, #eff1f1); box-shadow: 0 9px 14px rgba(0,0,0,.5), 0 19px 8px -2px rgba(0,0,0,.2), 0 33px 8px rgba(0,0,0,.4), 0 -12px 10px rgba(255,255,255,.5), inset 0 3px 3px rgba(255,255,255,.6), inset 0 -3px 3px rgba(89,91,92,.6); }
    .rdp-joystick-inside { background-image: linear-gradient(180deg, #adb9bf, #d4dbdd); box-shadow: inset 0 3px 6px rgba(152,160,163,.4), inset 0 -3px 6px rgba(238,244,246,.4); }
    .rdp-joystick-dot { background: #e7ecef; box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 -2px 2px rgba(0,0,0,.2); }
    .rdp-joystick-icon { fill: #b4b9bd; filter: drop-shadow(1px 1px 1px #f4f4f4); }
    .rdp-joystick-icon.active { fill: #e3a560; filter: brightness(.9) drop-shadow(0 0 2px #e3a15b) drop-shadow(0 0 1px #fff); }
}

@media (max-width: 560px) {
    .rdp-joystick { transform: scale(.92); }
    .joystick-panel-content { gap: 2px; }
    .rdp-joystick-icon { width: 26px; }
    .rdp-joystick-icon:nth-of-type(1) { top: -10%; }
    .rdp-joystick-icon:nth-of-type(2) { left: 110%; }
    .rdp-joystick-icon:nth-of-type(3) { top: 110%; }
    .rdp-joystick-icon:nth-of-type(4) { left: -10%; }
}

/* ===== RDP 顶栏：复用 SSH 页同类 CSS 图标实现，替换 Emoji/字符图标 ===== */
.rdp-page .topbar-actions .btn-sm[data-rdp-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rdp-page .topbar-actions .btn-sm[data-rdp-icon]::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background: var(--rdp-toolbar-icon-color, currentColor);
    -webkit-mask: var(--rdp-toolbar-icon) center / contain no-repeat;
    mask: var(--rdp-toolbar-icon) center / contain no-repeat;
}
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="quality"] { --rdp-toolbar-icon-color: #d9aa18; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="fit"] { --rdp-toolbar-icon-color: #4aa3df; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v2H7.4l4.1 4.1-1.4 1.4L6 7.4V11H4V4zm9 0h7v7h-2V7.4l-4.1 4.1-1.4-1.4L16.6 6H13V4zM4 13h2v3.6l4.1-4.1 1.4 1.4L7.4 18H11v2H4v-7zm14 0h2v7h-7v-2h3.6l-4.1-4.1 1.4-1.4 4.1 4.1V13z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="zoom"] { --rdp-toolbar-icon-color: #6b7684; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm1 2H9v2H7v2h2v2h2v-2h2v-2h-2V8zm4.7 7.3 4.5 4.5-1.4 1.4-4.5-4.5 1.4-1.4z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="clipboard"] { --rdp-toolbar-icon-color: #9a6a3a; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h3v16H5V5h3l1-2zm1 4h4l1-2h-6l1 2zm-3 1v11h10V8h-2v2H9V8H7z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="keyboard"] { --rdp-toolbar-icon-color: #6b7684; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="shortcuts"] { --rdp-toolbar-icon-color: #d9aa18; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="joystick"] { --rdp-toolbar-icon-color: #ffb14f; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 9h10a5 5 0 0 1 4.8 3.6l.8 3A3.5 3.5 0 0 1 19.2 20c-1 0-1.9-.4-2.6-1.1L14.7 17H9.3l-1.9 1.9A3.7 3.7 0 0 1 4.8 20a3.5 3.5 0 0 1-3.4-4.4l.8-3A5 5 0 0 1 7 9zm1 3H6v2H4v2h2v2h2v-2h2v-2H8v-2zm8.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM18 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM11 4h2v5h-2V4z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="security"] { --rdp-toolbar-icon-color: #0a84ff; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 5 5v6c0 4.6 2.9 8.8 7 10 4.1-1.2 7-5.4 7-10V5l-7-3zm0 3.2 5 2.1V11c0 3.3-2 6.4-5 7.6-3-1.2-5-4.3-5-7.6V7.3l5-2.1zM11 8h2v5h-2V8zm0 7h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="reconnect"] { --rdp-toolbar-icon-color: #0a84ff; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.76-4.24L13 11h8V3l-3.3 3.3z'/%3E%3C/svg%3E"); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon="disconnect"] { --rdp-toolbar-icon-color: #f85149; --rdp-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v2H7V3zm4 4h2v7h-2V7zm-5.6 3.2 1.5 1.3A6 6 0 1 0 17.1 11.5l1.5-1.3a8 8 0 1 1-13.2 0z'/%3E%3C/svg%3E"); }
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .rdp-page .topbar-actions .btn-sm[data-rdp-icon] { gap: 0; }
    .rdp-page .topbar-actions .btn-sm[data-rdp-icon]::before {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }
}

.rdp-page .zoom-control {
    gap: 7px;
    min-width: 172px;
    padding-inline: 10px;
    cursor: default;
}
.rdp-page .zoom-control input[type="range"] {
    width: 78px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}
.rdp-page .zoom-control em {
    min-width: 38px;
    font-style: normal;
    font-weight: 800;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: right;
}
@media (max-width: 560px) {
    .rdp-page .zoom-control { min-width: 146px; }
    .rdp-page .zoom-control input[type="range"] { width: 56px; }
}

/* Mobile SSH stable input mode: keep desktop unchanged, decouple keyboard from PTY resize. */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    html.mobile-stable-input,
    body.mobile-stable-input {
        height: var(--stable-vh, 100svh);
        overflow: hidden;
        overscroll-behavior: none;
    }

    html.mobile-stable-input .terminal-page {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        transform: none !important;
        transition: background-color 0.24s ease, border-color 0.24s ease !important;
        will-change: auto !important;
        overflow: hidden !important;
        padding-bottom: 0;
    }

    html.mobile-stable-input.viewport-updating .terminal-page,
    html.mobile-stable-input.keyboard-open .terminal-page {
        height: 100% !important;
        max-height: 100% !important;
        transform: none !important;
        transition: background-color 0.24s ease, border-color 0.24s ease !important;
    }

    html.mobile-stable-input .terminal-topbar {
        flex: 0 0 auto;
        order: 0;
    }
    html.mobile-stable-input {
        --mobile-bottom-actions-height: 46px;
        --mobile-aux-keys-height: 44px;
    }


    html.mobile-stable-input .terminal-container {
        flex: 1 1 auto !important;
        order: 2;
        min-height: 0;
        height: auto !important;
        max-height: none !important;
        margin: 6px;
        margin-bottom: 6px;
        transform: none !important;
        transition: background-color 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
        contain: layout paint;
    }

    html.mobile-stable-input .terminal-container .wterm-wrapper,
    html.mobile-stable-input .terminal-container .wterm-wrapper.wterm {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important;
        transform: none !important;
        will-change: auto !important;
    }

    /* Keyboard is pure overlay. Extra padding-bottom on the scroll container
       increases scrollHeight so when scrolled to bottom, the cursor is naturally
       above the keyboard. No layout changes, no margin tricks. */
    html.mobile-stable-input.keyboard-open .terminal-container .wterm-wrapper,
    html.mobile-stable-input.keyboard-open .terminal-container .wterm-wrapper.wterm {
        padding-bottom: 8px;
        transition: padding-bottom 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ── Top input bar: between topbar and terminal ── */
    html.mobile-stable-input .terminal-top-input {
        display: block;
        order: 1;
    }
    /* ── Bottom aux keys: fixed directly above the system keyboard ── */
    html.mobile-stable-input .terminal-bottom-bar {
        display: block;
        position: static;
        flex: 0 0 auto;
        order: 4;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 21;
        padding-bottom: max(2px, env(safe-area-inset-bottom));
        transform: none !important;
        transition: none;
        will-change: auto;
        background: var(--surface);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
    }

    html.mobile-stable-input.keyboard-open .terminal-bottom-bar {
        bottom: auto;
        transform: none !important;
    }

    /* Reuse the original topbar CSS-icon actions row; move it above the aux keys on mobile. */
    html.mobile-stable-input .topbar-actions {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 22;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        padding: 6px 8px;
        flex: 0 0 auto;
        order: 3;
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.12);
        transform: none !important;
        transition: none;
    }

    /* ── Mobile auxiliary keys: compact horizontal bar, always on top ── */
    html.mobile-stable-input .mobile-aux-keys {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        min-height: var(--mobile-aux-keys-height, 44px);
        padding: 5px 8px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    html.mobile-stable-input .mobile-aux-keys::-webkit-scrollbar { height: 0; }
    html.mobile-stable-input .aux-key {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 32px;
        padding: 0 8px;
        font-size: 11px;
        font-weight: 600;
        font-family: var(--font-sans);
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        cursor: pointer;
        white-space: nowrap;
        flex: 0 0 auto;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.1s;
    }
    html.mobile-stable-input .aux-key:active,
    html.mobile-stable-input .aux-key.aux-pressing {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
        transform: scale(0.94);
        transition: transform 0.08s ease, background 0.08s ease, color 0.08s ease;
    }
    html.mobile-stable-input .aux-key {
        transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    }
    html.mobile-stable-input .aux-key.aux-active {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }
    html.mobile-stable-input .aux-arrow {
        font-size: 14px;
        min-width: 32px;
        letter-spacing: 0;
    }
    html.mobile-stable-input .aux-sep {
        width: 1px;
        height: 24px;
        background: var(--border);
        margin: 4px 2px;
        flex-shrink: 0;
    }

    /* ── WTerm mobile grid optimizations ── */
    html.mobile-stable-input .terminal-container .wterm-wrapper.wterm {
        padding: 8px;  /* edge-to-edge: reclaim screen space */
    }
    html.mobile-stable-input .terminal-container .wterm-wrapper .term-grid {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
    html.mobile-stable-input .terminal-container .wterm-wrapper .term-row,
    html.mobile-stable-input .terminal-container .wterm-wrapper .term-scrollback-row {
        line-height: 1.35;
        letter-spacing: 0.005em;
    }
    /* Prevent accidental text selection during active scrolling */
    html.mobile-stable-input .terminal-container .wterm-wrapper.is-scrolling .term-grid,
    html.mobile-stable-input .terminal-container .wterm-wrapper.is-scrolling .term-row,
    html.mobile-stable-input .terminal-container .wterm-wrapper.is-scrolling .term-scrollback-row {
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    html.mobile-stable-input .mobile-terminal-ime-proxy {
        position: fixed;
        left: max(8px, env(safe-area-inset-left));
        bottom: calc(var(--keyboard-inset, 0px) + 8px);
        width: 2px;
        height: 2px;
        min-width: 2px;
        min-height: 2px;
        max-width: 2px;
        max-height: 2px;
        opacity: 0.02;
        border: 0;
        padding: 0;
        margin: 0;
        color: transparent;
        background: transparent;
        caret-color: transparent;
        resize: none;
        outline: none;
        overflow: hidden;
        pointer-events: none;
        z-index: 1;
        transform: translateZ(0);
    }
}





/* Mobile SSH measured layout fix: symmetric gutters and real keyboard avoidance. */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page,
    html.mobile-stable-input .terminal-page {
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr);
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: var(--bg) !important;
    }

    html.mobile-stable-input.keyboard-open .terminal-page {
        /* The parent app shrinks the iframe to the area above the keyboard. */
        height: 100% !important;
        max-height: 100% !important;
    }

    .terminal-page .terminal-topbar,
    .terminal-page .terminal-container,
    html.mobile-stable-input .terminal-top-input,
    html.mobile-stable-input .terminal-bottom-bar,
    html.mobile-stable-input .terminal-topbar,
    html.mobile-stable-input .terminal-container {
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        box-sizing: border-box;
    }

    html.mobile-stable-input .terminal-container {
        width: auto !important;
        align-self: stretch !important;
        margin: 6px !important;
        margin-bottom: 6px !important;
        min-height: 0 !important;
    }

    html.mobile-stable-input .terminal-container .wterm-wrapper,
    html.mobile-stable-input .terminal-container .wterm-wrapper.wterm {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* Mobile SSH final layout guard: keep the terminal viewport between the input and bottom toolbars. */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    html.mobile-stable-input,
    body.mobile-stable-input {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    html.mobile-stable-input .terminal-page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        grid-template-areas:
            "mobile-input"
            "mobile-terminal"
            "mobile-actions"
            "mobile-aux" !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        inset: 0 !important;
    }

    html.mobile-stable-input .terminal-topbar {
        display: none !important;
    }

    html.mobile-stable-input .terminal-top-input {
        grid-area: mobile-input !important;
        display: block !important;
        min-height: 0 !important;
    }

    html.mobile-stable-input .terminal-container {
        grid-area: mobile-terminal !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html.mobile-stable-input .topbar-actions {
        grid-area: mobile-actions !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }

    html.mobile-stable-input .terminal-bottom-bar {
        grid-area: mobile-aux !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }
}


/* Mobile app-hosted SSH: clamp the compact workspace to the visible terminal view.
   This keeps the iframe from overflowing below the phone viewport, so the in-frame
   bottom toolbars stay visible instead of being clipped off-screen. */
@media (max-width: 760px) and (hover: none) and (pointer: coarse) {
    body.app-body.terminal-mode:not(.terminal-custom-fullscreen-open) .terminal-view.active {
        height: calc(100dvh - var(--smartbar-top, 61px) - 4px) !important;
        max-height: calc(100dvh - var(--smartbar-top, 61px) - 4px) !important;
        min-height: 0 !important;
    }

    body.app-body.terminal-mode:not(.terminal-custom-fullscreen-open) .terminal-workspace.compact:not(.keyboard-open) {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
    }

    body.app-body.terminal-mode:not(.terminal-custom-fullscreen-open) .terminal-window,
    body.app-body.terminal-mode:not(.terminal-custom-fullscreen-open) .terminal-window-body,
    body.app-body.terminal-mode:not(.terminal-custom-fullscreen-open) .terminal-frame {
        min-height: 0 !important;
        max-height: 100% !important;
    }
}

/* Colored SVG glyphs converted from the supplied macOS-style icon set. */
.zephyr-glyph-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.zephyr-glyph { width: 1.45em; height: 1.45em; flex: 0 0 auto; vertical-align: -0.32em; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); overflow: visible; }
.fm-item-name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.fm-file-glyph { width: 24px; height: 24px; }
.fm-item-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-glyph-action { display: inline-flex; align-items: center; gap: 6px; }
.fm-glyph-action .fm-button-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.fm-glyph-action .fm-button-icon[data-glyph="folder"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='macBlue' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235AC8FA'/%3E%3Cstop offset='100%25' stop-color='%23007AFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 7C2 5.3 3.3 4 5 4H9.3C10.1 4 10.9 4.4 11.5 5L12.5 6.1C12.8 6.4 13.2 6.6 13.6 6.6H19C20.7 6.6 22 7.9 22 9.6V17C22 18.7 20.7 20 19 20H5C3.3 20 2 18.7 2 17V7Z' fill='url(%23macBlue)'/%3E%3C/svg%3E"); }
.fm-glyph-action .fm-button-icon[data-glyph="file"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z' fill='%23FFFFFF' stroke='%23C7C7CC' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14 2V8H20' fill='%23E5E5EA' stroke='%23C7C7CC' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='8' y1='13' x2='16' y2='13' stroke='%23007AFF' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='8' y1='17' x2='14' y2='17' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fm-glyph-action .fm-button-icon[data-glyph="upload"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='macCyan' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2332ADE6'/%3E%3Cstop offset='100%25' stop-color='%23007AFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M17.5 19C20 19 22 17 22 14.5C22 12.1 20.2 10.2 17.9 10C17.4 6.6 14.5 4 11 4C7.1 4 4 7.1 4 11C4 11.2 4 11.5 4.1 11.7C2.3 12.3 1 14 1 16C1 18.2 2.8 20 5 20' fill='url(%23macCyan)'/%3E%3Cpath d='M11 16V9M8 12L11 9L14 12' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fm-item-actions button .fm-button-glyph { width: 20px; height: 20px; }
.copy-ip-btn .fm-button-glyph { width: 18px; height: 18px; display: block; }
.monitor-title { display: inline-flex; align-items: center; gap: 8px; }
.monitor-title-icon { width: 23px; height: 23px; display: inline-flex; flex: 0 0 23px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='macDark' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2348484A'/%3E%3Cstop offset='100%25' stop-color='%231C1C1E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='4' width='20' height='16' rx='4' fill='url(%23macDark)'/%3E%3Cpath d='M 3 12 H 8.5 L 10.5 7 L 13.5 17 L 15.5 12 H 21' fill='none' stroke='%2332D74B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.14)); }


/* Polish file-manager toolbar alignment on compact touch screens. */
.fm-toolbar .tool-btn,
.fm-toolbar .fm-upload-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.fm-toolbar .fm-select-btn,
.fm-toolbar .fm-paste-btn {
    min-height: 31px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Zephyr AI Agent */
.ai-floating-btn { min-width: 42px; font-weight: 900; color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 22px var(--accent-glow, rgba(10,132,255,.22)); }
.ai-floating-btn.force-hidden { display: none !important; }
.nav-tab-ai.force-hidden { display: none !important; }
.ai-section-head { align-items: center; }
.ai-empty-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-soft);
}
.ai-settings-form h3 { margin: 12px 0 0; color: var(--text); }
.ai-permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 14px; }
.ai-provider-list, .ai-skill-list, .ai-env-list, .ai-memory-list, .ai-plan-list { display: grid; gap: 10px; margin: 12px 0 20px; }
.ai-provider-item, .ai-skill-item, .ai-env-item, .ai-memory-item, .ai-plan-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
}
.ai-provider-item strong, .ai-skill-item strong, .ai-env-item strong, .ai-memory-item strong, .ai-plan-item strong { display: block; color: var(--text); }
.ai-provider-item span, .ai-skill-item span, .ai-env-item span, .ai-memory-item span, .ai-plan-item span { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.ai-provider-item code, .ai-skill-item code, .ai-memory-item code { display: block; margin-top: 6px; max-height: 58px; overflow: hidden; color: var(--text-secondary); white-space: pre-wrap; }
.ai-plan-item ol { margin: 8px 0 0 20px; color: var(--text-secondary); }
.ai-plan-item li em { color: var(--accent-hover); font-style: normal; margin-right: 6px; }
.ai-agent-panel.file-manager {
    position: fixed;
    z-index: var(--panel-z, 10080);
    min-width: 420px;
    min-height: 420px;
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 18px;
    box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
}
.ai-agent-panel.file-manager.front { z-index: var(--panel-z, 10080); }
.ai-agent-panel.file-manager.dragging,
.ai-agent-panel.file-manager.resizing { transition: none; user-select: none; touch-action: none; }
.ai-agent-panel.file-manager.layout-animating {
    transition: left .62s var(--ios-open), top .62s var(--ios-open), width .62s var(--ios-open), height .62s var(--ios-open), border-radius .42s ease, transform .72s var(--ios-bounce), opacity .28s ease, filter .32s ease;
}
.ai-agent-panel .panel-drag-handle {
    position: relative;
    top: auto;
    left: auto;
    z-index: 6;
}
.ai-agent-window {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
    color: var(--text);
}
.ai-agent-sidebar {
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--surface) 72%, var(--bg));
    border-right: 1px solid var(--border);
}
.ai-sidebar-header, .ai-sidebar-footer {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}
.ai-sidebar-footer { height: auto; padding: 10px; border-top: 1px solid var(--border); border-bottom: 0; }
.new-chat-btn { border: 0; border-radius: 8px; background: transparent; color: var(--accent); font-size: 22px; cursor: pointer; }
.ai-chat-list { flex: 1; overflow-y: auto; padding: 10px; display: grid; align-content: start; gap: 6px; }
.ai-chat-item {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 12px;
    background: transparent;
    color: var(--text);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ai-chat-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ai-chat-item.active { background: var(--accent); color: #fff; }
.ai-agent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-title-bar {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}
.ai-title { font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.ai-header-actions .ui-select { max-width: 180px; }
.ui-select, .ui-btn {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 9px;
    padding: 6px 9px;
    font: inherit;
}
.ui-btn { cursor: pointer; }
.ui-btn.danger, .ui-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.ai-capability-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ai-capability-strip span { font-size: 12px; color: var(--accent-hover); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; padding: 3px 8px; }
.ai-browser-preview {
    flex: 0 0 auto;
    margin: 8px 12px 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 78%, var(--bg));
}
.ai-browser-preview.force-hidden { display: none !important; }
.ai-browser-preview-head {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 9px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}
.ai-browser-preview-body { min-height: 92px; max-height: 240px; overflow: auto; display: grid; place-items: center; padding: 8px; color: var(--text-secondary); }
.ai-browser-preview-body a { display: block; width: 100%; }
.ai-browser-preview-body img { display: block; width: 100%; border-radius: 10px; object-fit: contain; background: #111; }
.ai-browser-preview-body small { display: block; margin-top: 6px; font-size: 11px; word-break: break-all; }
.ai-inline-shot { display: block; max-width: min(100%, 520px); max-height: 320px; object-fit: contain; margin: 8px 0; border: 1px solid var(--border); border-radius: 12px; background: #111; }
.ai-plan-actions, .ai-step-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-step-actions button { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-secondary); padding: 3px 7px; cursor: pointer; font-size: 11px; }
.ai-plan-item li small { display: block; margin: 3px 0 0 18px; font-size: 11px; color: var(--text-secondary); }
.ai-status { display: inline-flex; border-radius: 999px; padding: 1px 6px; font-style: normal; background: color-mix(in srgb, var(--text-secondary) 12%, transparent); }
.ai-status-running, .ai-status-retrying { color: var(--accent-hover); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ai-status-completed { color: var(--success, #16a34a); background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent); }
.ai-status-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ai-status-paused { color: var(--warning, #f5a524); background: color-mix(in srgb, var(--warning, #f5a524) 16%, transparent); }
.ai-chat-area { flex: 1; overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.ai-message { max-width: 78%; padding: 12px 15px; border-radius: 18px; line-height: 1.48; white-space: pre-wrap; word-break: break-word; box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.ai-message small { display: block; opacity: .68; margin-bottom: 5px; font-size: 11px; }
.ai-message.ai, .ai-message.assistant { align-self: flex-start; background: color-mix(in srgb, var(--surface) 76%, var(--bg)); border-bottom-left-radius: 5px; }
.ai-message.user { align-self: flex-end; color: #fff; background: var(--accent); border-bottom-right-radius: 5px; }
.ai-message.system { align-self: flex-start; max-width: 92%; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 72%, var(--bg)); box-shadow: 0 10px 28px rgba(0,0,0,.08); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.ai-message.system pre, .ai-message.ai pre { max-width: 100%; overflow: auto; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 88%, #000); border: 1px solid var(--border); }
.ai-message.system code, .ai-message.ai code { font-family: var(--font-mono); }
.ai-confirm-card { background: color-mix(in srgb, var(--warning, #f5a524) 12%, var(--surface)) !important; color: var(--text) !important; }
.ai-confirm-card pre { max-height: 180px; overflow: auto; text-align: left; }
.ai-typing-indicator { align-self: flex-start; display: none; gap: 5px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 76%, var(--bg)); }
.ai-typing-indicator.show { display: flex; }
.ai-typing-indicator span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary); animation: ai-bounce 1.25s infinite ease-in-out both; }
.ai-typing-indicator span:nth-child(2) { animation-delay: .12s; }
.ai-typing-indicator span:nth-child(3) { animation-delay: .24s; }
@keyframes ai-bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.ai-input-area { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.ai-tool-btn, .ai-send-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.ai-tool-btn.active { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.ai-send-btn { color: #fff; border-color: var(--accent); background: var(--accent); }
.ai-input-box { flex: 1; min-height: 38px; max-height: 140px; resize: none; border-radius: 18px; border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 10px 14px; font: inherit; outline: none; }
.ai-input-box:focus { border-color: var(--accent); }
#aiProviderModal,
.modal-backdrop:has(.ai-provider-modal) { z-index: 10090; }
.ai-provider-modal { max-width: 860px; display: grid; gap: 10px; }
.ai-provider-modal h3 { margin: 4px 0 0; }
.ai-provider-modal > label:not(.check-line) { display: none; }
.ai-provider-modal > input, .ai-provider-modal > select, .ai-provider-modal > textarea { width: 100%; box-sizing: border-box; }
.ai-provider-modal .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ai-provider-modal .form-group { min-width: 0; margin-bottom: 0; }
.ai-provider-modal .form-group label { display: block; margin: 0 0 6px; font-size: 12px; line-height: 1.25; color: var(--text-secondary); text-transform: none; }
.ai-provider-modal input, .ai-provider-modal select, .ai-provider-modal textarea {
    width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit;
}
.ai-provider-modal textarea { resize: vertical; min-height: 76px; }
.ai-provider-modal .modal-actions { margin-top: 4px; }
.ai-layout-menu { z-index: 10095; }
.ai-code-completion-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-hover); }
@media (max-width: 760px) {
    .ai-agent-panel.file-manager { left: 6px; top: 6px; width: calc(100vw - 12px); height: calc(100dvh - 12px); min-width: 0; min-height: 0; border-radius: 14px; }
    .ai-provider-modal { max-width: calc(100vw - 20px); }
    .ai-provider-modal .form-row { grid-template-columns: 1fr; gap: 8px; }
    .ai-agent-window { flex-direction: column; }
    .ai-browser-preview { margin: 6px 8px 0; }
    .ai-browser-preview-body { min-height: 72px; max-height: 132px; }
    .ai-chat-area { padding: 12px 10px; gap: 10px; }
    .ai-input-area { padding: 8px; gap: 7px; }
    .ai-agent-sidebar { width: 100%; flex: 0 0 96px; border-right: 0; border-bottom: 1px solid var(--border); }
    .ai-sidebar-header { height: 38px; padding: 0 10px; }
    .ai-chat-list { display: flex; overflow-x: auto; overflow-y: hidden; padding: 8px; }
    .ai-chat-item { min-width: 130px; }
    .ai-sidebar-footer { display: none; }
    .ai-title-bar { min-height: 48px; padding: 7px 10px; align-items: center; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
    .ai-title { flex: 0 0 auto; max-width: 112px; }
    .ai-header-actions { justify-content: flex-start; width: auto; flex: 1 0 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
    .ai-header-actions .ui-select, .ai-header-actions .ui-btn { max-width: none; min-height: 36px; flex: 0 0 auto; white-space: nowrap; }
    .ai-capability-strip { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-block: 7px; }
    .ai-message { max-width: 92%; }
    .ai-provider-item, .ai-skill-item { grid-template-columns: minmax(0,1fr); }
}


/* Zephyr AI Agent mobile polish */
.ai-floating-btn.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 10px 28px rgba(0,122,255,.28), 0 0 0 3px rgba(10,132,255,.10);
}
.ai-floating-btn:not(.active) {
    background: var(--bg);
    color: var(--accent-hover);
    border-color: var(--border);
    box-shadow: none;
}
.nav-tab-ai { display: none !important; }
.ai-model-actions { display: grid; grid-template-rows: auto 1fr; }
.ai-model-actions .btn { min-height: 42px; }
.ai-agent-panel.file-manager { container-type: inline-size; }
.ai-agent-panel .panel-drag-handle {
    height: 28px;
    background: color-mix(in srgb, var(--border) 28%, transparent);
}
.ai-agent-panel .panel-traffic-btn {
    --panel-island-w: 58px;
    --panel-island-h: 22px;
}
.ai-chat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    transition: background .22s ease, transform .18s ease;
}
.ai-chat-row:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ai-chat-row.active { background: var(--accent); color: #fff; }
.ai-chat-row.active .ai-chat-item { color: #fff; }
.ai-chat-row.active .ai-chat-delete { color: rgba(255,255,255,.88); }
.ai-chat-item { width: 100%; min-width: 0; }
.ai-chat-row .ai-chat-item,
.ai-chat-row .ai-chat-item:hover,
.ai-chat-row .ai-chat-item.active { background: transparent; color: inherit; }
.ai-chat-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-chat-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-chat-running-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--success, #16a34a);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success, #16a34a) 15%, transparent);
    animation: aiRunningPulse 1.15s ease-in-out infinite;
}
.ai-chat-row.active .ai-chat-running-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
@keyframes aiRunningPulse { 0%, 100% { transform: scale(.78); opacity: .62; } 50% { transform: scale(1.08); opacity: 1; } }
.ai-chat-delete {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: .72;
    transition: opacity .18s ease, background .18s ease, transform .14s ease;
}
.ai-chat-delete:hover { opacity: 1; background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.ai-chat-delete:active { transform: scale(.88); }
.ai-agent-sidebar,
.ai-title-bar,
.ai-capability-strip,
.ai-browser-preview,
.ai-chat-area,
.ai-input-area {
    transition: flex-basis .32s cubic-bezier(.16,1,.3,1), width .32s cubic-bezier(.16,1,.3,1), max-height .32s cubic-bezier(.16,1,.3,1), opacity .22s ease, transform .22s ease;
}
.ai-agent-panel.sidebar-collapsed .ai-agent-sidebar {
    flex-basis: 0 !important;
    width: 0 !important;
    min-width: 0;
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
    border-right: 0;
    border-bottom: 0;
    overflow: hidden;
}
.ai-agent-panel.ai-narrow .ai-title { display: none; }
.ai-agent-panel.ai-narrow .ai-header-actions { justify-content: flex-start; }
.ai-agent-panel.ai-narrow .ai-capability-strip span { font-size: 11px; padding: 2px 7px; }
.ai-input-area {
    display: grid;
    grid-template-columns: 40px 40px minmax(0, 1fr) 48px;
    gap: 10px;
    align-items: end;
    padding-right: 22px;
}
.ai-tool-btn,
.ai-send-btn {
    display: inline-grid;
    place-items: center;
    font-size: 17px;
    transition: transform .16s cubic-bezier(.18,1.2,.2,1), box-shadow .18s ease, background .18s ease;
}
.ai-tool-btn:active,
.ai-send-btn:active { transform: scale(.9); }
.ai-send-btn { width: 46px; height: 46px; font-size: 20px; box-shadow: 0 8px 20px var(--accent-glow, rgba(10,132,255,.24)); }
.ai-input-box { min-height: 46px; border-radius: 23px; padding: 12px 15px; }
.ai-agent-panel .panel-resize-handle { z-index: 4; opacity: .46; pointer-events: auto; }
.ai-agent-panel .panel-resize-handle.right { right: 2px; }
.ai-agent-panel .panel-resize-handle.left { left: 2px; }
.ai-agent-panel .panel-resize-handle::before { width: 22px; height: 22px; border-width: 0 2px 2px 0; }
.ai-agent-panel .panel-resize-handle.left::before { border-width: 0 0 2px 2px; }
.ai-message { overflow-wrap: anywhere; }
.ai-message.system { word-break: break-word; }
.ai-message.system pre,
.ai-message.ai pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 46vh;
}
.ai-capability-strip { scrollbar-width: thin; }
.ai-capability-strip span { white-space: nowrap; flex: 0 0 auto; }
@container (max-width: 680px) {
    .ai-agent-window { flex-direction: column; }
    .ai-agent-sidebar { width: 100%; flex: 0 0 88px; border-right: 0; border-bottom: 1px solid var(--border); }
    .ai-sidebar-header { height: 34px; padding: 0 10px; }
    .ai-chat-list { display: flex; overflow-x: auto; overflow-y: hidden; padding: 7px 8px; gap: 7px; }
    .ai-chat-row { min-width: 148px; grid-template-columns: minmax(0,1fr) 26px; flex: 0 0 auto; }
    .ai-chat-item { padding: 8px 10px; }
    .ai-chat-delete { width: 24px; height: 24px; }
    .ai-sidebar-footer { display: none; }
    .ai-title-bar { min-height: 46px; padding: 6px 9px; overflow-x: auto; overflow-y: hidden; }
    .ai-header-actions { flex: 1 0 auto; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
    .ai-header-actions .ui-select,
    .ai-header-actions .ui-btn { max-width: none; min-height: 34px; flex: 0 0 auto; white-space: nowrap; }
    .ai-capability-strip { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; }
    .ai-chat-area { padding: 10px 8px; gap: 10px; }
    .ai-message { max-width: 94%; padding: 10px 12px; border-radius: 16px; }
    .ai-input-area { grid-template-columns: 38px 38px minmax(0,1fr) 50px; gap: 7px; padding: 8px 18px 8px 8px; }
}
@media (max-width: 760px) {
    .ai-agent-panel.file-manager {
        left: 6px;
        top: 6px;
        width: calc(100vw - 12px);
        height: calc(100dvh - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 16px;
    }
    .ai-agent-window { flex-direction: column; }
    .ai-agent-sidebar { width: 100%; flex: 0 0 88px; border-right: 0; border-bottom: 1px solid var(--border); }
    .ai-chat-list { display: flex; overflow-x: auto; overflow-y: hidden; padding: 7px 8px; gap: 7px; }
    .ai-chat-row { min-width: 148px; flex: 0 0 auto; }
    .ai-title-bar { min-height: 46px; padding: 6px 9px; }
    .ai-title { display: none; }
    .ai-header-actions { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; }
    .ai-header-actions .ui-select,
    .ai-header-actions .ui-btn { font-size: 13px; min-height: 34px; }
    .ai-capability-strip { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; gap: 5px; }
    .ai-capability-strip span { font-size: 11px; padding: 2px 7px; }
    .ai-browser-preview { margin: 6px 8px 0; }
    .ai-browser-preview-body { min-height: 64px; max-height: 118px; }
    .ai-chat-area { min-height: 0; padding: 10px 8px; gap: 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .ai-message { max-width: 94%; }
    .ai-input-area { grid-template-columns: 38px 38px minmax(0,1fr) 52px; gap: 7px; padding: 8px 20px 8px 8px; }
    .ai-tool-btn { width: 38px; height: 38px; }
    .ai-send-btn { width: 50px; height: 44px; }
    .ai-input-box { min-height: 44px; max-height: 112px; }
    .ai-agent-panel .panel-resize-handle { display: block; width: 26px; height: 26px; opacity: .36; }
}

.ai-agent-panel.ai-narrow .ai-agent-window { flex-direction: column; }
.ai-agent-panel.ai-narrow .ai-chat-area { padding: 9px 7px; }
.ai-agent-panel.ai-narrow .ai-input-area { grid-template-columns: 34px 34px minmax(0,1fr) 46px; gap: 6px; padding-right: 16px; }
.ai-agent-panel.ai-narrow .ai-tool-btn { width: 34px; height: 34px; font-size: 15px; }
.ai-agent-panel.ai-narrow .ai-send-btn { width: 46px; height: 42px; }
.ai-agent-panel.ai-narrow .ai-input-box { min-height: 42px; padding: 10px 12px; }
.ai-agent-panel.ai-narrow .ai-browser-preview-body { max-height: 96px; }

.ai-message.system.system-collapsed {
    max-height: 220px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.ai-message.system.system-collapsed::after {
    content: '点击展开工具详情';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--accent-hover);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 94%, var(--bg)) 68%);
}
.ai-message.system.system-expanded { max-height: none; }
.ai-message.system.system-expanded::after { content: none; }
.ai-confirm-card.system-collapsed { max-height: none; cursor: default; }
.ai-confirm-card.system-collapsed::after { content: none; }

.ai-provider-item { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
@media (max-width: 760px) {
    .ai-provider-item { grid-template-columns: minmax(0,1fr); }
}

.ai-input-area { padding-left: 42px; padding-right: 44px; }
.ai-agent-panel.ai-narrow .ai-input-area { padding-left: 36px; padding-right: 38px; }
@media (max-width: 760px) {
    .ai-input-area { padding-left: 36px; padding-right: 42px; }
}

.ai-input-box::placeholder { font-size: 13px; }
@media (max-width: 760px) {
    .ai-input-box::placeholder { font-size: 12px; }
}


/* 20260608: mobile scroll + AI panel transparency/stability fixes */
body.app-body:not(.terminal-mode) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
body.app-body:not(.terminal-mode) .app-shell,
body.app-body:not(.terminal-mode) .app-main {
    overflow: visible !important;
    min-height: 100dvh;
}
.ai-capability-strip.force-hidden { display: none !important; }
.ai-tool-trace {
    display: grid;
    gap: 8px;
    width: min(100%, 760px);
    margin: 4px 0;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 84%, var(--bg));
    color: var(--text);
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.ai-tool-trace-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ai-tool-trace-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-tool-trace-head em { margin-left: auto; color: var(--text-secondary); font-style: normal; font-family: var(--font-mono); font-size: 12px; }
.ai-tool-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; background: var(--accent); font-size: 12px; }
.ai-tool-summary { color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.ai-tool-details { border-top: 1px solid var(--border); padding-top: 7px; }
.ai-tool-details summary { cursor: pointer; color: var(--accent-hover); font-size: 12px; user-select: none; }
.ai-tool-details pre { max-height: min(52vh, 520px) !important; margin-top: 8px; white-space: pre-wrap; overflow: auto; }
.ai-message.ai-trace-message { max-width: min(96%, 820px); padding: 0; background: transparent; border: 0; box-shadow: none; color: var(--text); }
.ai-message.ai-trace-message br { display: none; }
.ai-title-bar.panel-titlebar { cursor: grab; touch-action: pan-x; }
.ai-title-bar.panel-titlebar:active { cursor: grabbing; }
.ai-header-actions, .ai-header-actions * { cursor: auto; }
.ai-agent-panel.file-manager { contain: layout paint; }
.ai-agent-panel.file-manager.dragging { cursor: grabbing; }

@media (max-width: 760px) {
    html:has(body.app-body:not(.terminal-mode)),
    html:has(body.app-body:not(.terminal-mode)) body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        touch-action: pan-y !important;
    }
    .ai-agent-panel.file-manager {
        left: 6px;
        top: 6px;
        width: calc(100vw - 12px);
        height: calc(100dvh - 12px);
        max-height: calc(100dvh - 12px);
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 16px;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: color-mix(in srgb, var(--surface) 98%, var(--bg));
        transform: none;
        opacity: 1;
    }
    .ai-agent-panel.panel-opening,
    .ai-agent-panel.panel-closing { animation: none !important; }
    .ai-agent-panel .panel-drag-handle { height: 18px; touch-action: none; }
    .ai-title-bar.panel-titlebar {
        touch-action: pan-x;
        cursor: grab;
        user-select: none;
    }
    .ai-agent-window,
    .ai-agent-main { min-height: 0; overflow: hidden; }
    .ai-agent-sidebar { flex: 0 0 92px !important; width: 100% !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; overflow: hidden; }
    .ai-agent-panel.sidebar-collapsed .ai-agent-sidebar { flex: 0 0 92px !important; width: 100% !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; border-bottom: 1px solid var(--border); }
    .ai-chat-list { overflow-x: auto !important; overflow-y: hidden !important; touch-action: pan-x !important; -webkit-overflow-scrolling: touch; }
    .ai-chat-area { overflow-y: auto !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .ai-header-actions { touch-action: pan-x !important; -webkit-overflow-scrolling: touch; }
    .ai-input-area, .ai-input-area * { touch-action: manipulation; }
    .ai-tool-trace { border-radius: 14px; padding: 10px; }
    .ai-tool-trace-head strong { white-space: normal; }
}


/* 20260608: AI openclaw-like browser/menu fixes */
.ai-layout-menu,
.panel-layout-menu.ai-layout-menu {
    z-index: 2147483000 !important;
    pointer-events: auto;
}
.ai-browser-preview {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.ai-browser-preview-head span::before {
    content: '●';
    color: var(--success, #16a34a);
    margin-right: 6px;
}
.ai-browser-preview-body {
    min-height: 180px;
    max-height: 46vh;
    background: #0b0f14;
}
.ai-browser-preview-body img {
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.24);
}
@media (max-width: 760px) {
    .ai-browser-preview-body { min-height: 140px; max-height: 34vh; }
}


/* 20260608: AI iOS-style motion system */
@keyframes aiIosFadeLift {
    0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.965); filter: blur(8px) saturate(.9); }
    62% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.012); filter: blur(0) saturate(1.04); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) saturate(1); }
}
@keyframes aiIosPopIn {
    0% { opacity: 0; transform: scale(.92) translate3d(0, 8px, 0); filter: blur(10px); }
    64% { opacity: 1; transform: scale(1.018) translate3d(0, -1px, 0); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes aiIosSlideSheet {
    0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.975); filter: blur(10px); }
    70% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.006); filter: blur(0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes aiIosTraceGlow {
    0% { box-shadow: 0 0 0 rgba(10,132,255,0), 0 8px 22px rgba(0,0,0,.08); }
    45% { box-shadow: 0 0 0 4px rgba(10,132,255,.10), 0 14px 32px rgba(0,0,0,.14); }
    100% { box-shadow: 0 8px 22px rgba(0,0,0,.08); }
}
#settings-ai .settings-form > label,
#settings-ai .settings-form > h3,
#settings-ai .settings-form > input,
#settings-ai .settings-form > textarea,
#settings-ai .settings-form > select,
#settings-ai .settings-form > .form-row,
#settings-ai .settings-form > .ai-permission-grid,
#settings-ai .settings-form > .field-hint,
#settings-ai .settings-form > .btn,
#settings-ai .ai-env-form > *,
#settings-ai .ai-memory-form > *,
#settings-ai .ai-skill-form > * {
    animation: aiIosFadeLift .46s var(--ios-open) both;
}
#settings-ai .settings-form > *:nth-child(2n),
#settings-ai .ai-env-form > *:nth-child(2n),
#settings-ai .ai-memory-form > *:nth-child(2n),
#settings-ai .ai-skill-form > *:nth-child(2n) { animation-delay: 24ms; }
#settings-ai .settings-form > *:nth-child(3n),
#settings-ai .ai-env-form > *:nth-child(3n),
#settings-ai .ai-memory-form > *:nth-child(3n),
#settings-ai .ai-skill-form > *:nth-child(3n) { animation-delay: 48ms; }
#settings-ai input,
#settings-ai select,
#settings-ai textarea,
.ai-provider-modal input,
.ai-provider-modal select,
.ai-provider-modal textarea,
.ai-header-actions .ui-select,
.ai-input-box {
    transition:
        transform .34s var(--ios-bounce),
        border-color .26s ease,
        background .26s ease,
        box-shadow .34s var(--ios-open),
        filter .24s ease;
}
#settings-ai input:focus,
#settings-ai select:focus,
#settings-ai textarea:focus,
.ai-provider-modal input:focus,
.ai-provider-modal select:focus,
.ai-provider-modal textarea:focus,
.ai-header-actions .ui-select:focus,
.ai-input-box:focus {
    transform: translate3d(0, -1px, 0) scale(1.006);
    box-shadow: 0 0 0 4px rgba(10,132,255,.13), 0 10px 26px rgba(0,0,0,.10);
}
#settings-ai .check-line,
.ai-provider-modal .check-line {
    border-radius: 14px;
    padding: 7px 9px;
    transition:
        transform .34s var(--ios-bounce),
        background .28s ease,
        border-color .28s ease,
        box-shadow .34s var(--ios-open),
        color .24s ease;
}
#settings-ai .check-line:hover,
.ai-provider-modal .check-line:hover {
    transform: translate3d(0, -1px, 0);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
#settings-ai .check-line:active,
.ai-provider-modal .check-line:active {
    transform: scale(.985);
}
#settings-ai .check-line:has(input:checked),
.ai-provider-modal .check-line:has(input:checked) {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
#settings-ai input[type="checkbox"],
.ai-provider-modal input[type="checkbox"] {
    accent-color: var(--accent);
    transition: transform .26s var(--ios-bounce), filter .24s ease;
}
#settings-ai input[type="checkbox"]:active,
.ai-provider-modal input[type="checkbox"]:active { transform: scale(.82); }
#settings-ai .btn,
#settings-ai .tool-btn,
.ai-provider-modal .btn,
.ai-provider-modal .tool-btn,
.ai-header-actions .ui-btn,
.ai-tool-btn,
.ai-send-btn,
.new-chat-btn,
.ai-chat-delete {
    transition:
        transform .30s var(--ios-bounce),
        background .24s ease,
        border-color .24s ease,
        color .24s ease,
        box-shadow .32s var(--ios-open),
        opacity .22s ease,
        filter .22s ease;
    -webkit-tap-highlight-color: transparent;
}
#settings-ai .btn:hover,
#settings-ai .tool-btn:hover,
.ai-provider-modal .btn:hover,
.ai-provider-modal .tool-btn:hover,
.ai-header-actions .ui-btn:hover,
.ai-tool-btn:hover,
.ai-send-btn:hover,
.new-chat-btn:hover,
.ai-chat-delete:hover {
    transform: translate3d(0, -1px, 0) scale(1.018);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
#settings-ai .btn:active,
#settings-ai .tool-btn:active,
.ai-provider-modal .btn:active,
.ai-provider-modal .tool-btn:active,
.ai-header-actions .ui-btn:active,
.ai-tool-btn:active,
.ai-send-btn:active,
.new-chat-btn:active,
.ai-chat-delete:active {
    transform: scale(.94);
    filter: brightness(.96);
}
.ai-provider-item,
.ai-skill-item,
.ai-env-item,
.ai-memory-item,
.ai-plan-item {
    animation: aiIosFadeLift .46s var(--ios-open) both;
    transition:
        transform .34s var(--ios-bounce),
        background .28s ease,
        border-color .28s ease,
        box-shadow .34s var(--ios-open),
        filter .24s ease;
    transform-origin: center;
}
.ai-provider-item:nth-child(2n),
.ai-skill-item:nth-child(2n),
.ai-env-item:nth-child(2n),
.ai-memory-item:nth-child(2n),
.ai-plan-item:nth-child(2n) { animation-delay: 32ms; }
.ai-provider-item:nth-child(3n),
.ai-skill-item:nth-child(3n),
.ai-env-item:nth-child(3n),
.ai-memory-item:nth-child(3n),
.ai-plan-item:nth-child(3n) { animation-delay: 64ms; }
.ai-provider-item:hover,
.ai-skill-item:hover,
.ai-env-item:hover,
.ai-memory-item:hover,
.ai-plan-item:hover {
    transform: translate3d(0, -2px, 0) scale(1.006);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.ai-provider-item:active,
.ai-skill-item:active,
.ai-env-item:active,
.ai-memory-item:active,
.ai-plan-item:active { transform: scale(.992); }
#aiProviderModal.show .ai-provider-modal,
#aiProviderModal.app-visible .ai-provider-modal {
    animation: aiIosSlideSheet .52s var(--ios-open) both;
    transform-origin: center bottom;
}
.ai-provider-modal .form-row,
.ai-provider-modal .form-group,
.ai-provider-modal h3,
.ai-provider-modal .modal-actions {
    animation: aiIosFadeLift .42s var(--ios-open) both;
}
.ai-provider-modal .form-row:nth-of-type(2n),
.ai-provider-modal .form-group:nth-of-type(2n) { animation-delay: 24ms; }
.ai-provider-modal .form-row:nth-of-type(3n),
.ai-provider-modal .form-group:nth-of-type(3n) { animation-delay: 48ms; }
.ai-agent-panel.open .ai-agent-window { animation: aiIosPopIn .48s var(--ios-open) both; }
.ai-agent-panel.open .ai-title-bar,
.ai-agent-panel.open .ai-browser-preview,
.ai-agent-panel.open .ai-input-area { animation: aiIosFadeLift .44s var(--ios-open) both; }
.ai-chat-row {
    animation: aiIosFadeLift .38s var(--ios-open) both;
    will-change: transform;
}
.ai-chat-row:hover { transform: translate3d(0, -1px, 0) scale(1.012); }
.ai-chat-row:active { transform: scale(.97); }
.ai-chat-row.active {
    transform: translate3d(0, -1px, 0) scale(1.018);
    box-shadow: 0 10px 24px rgba(0,122,255,.20);
}
.ai-message.ai,
.ai-message.user,
.ai-message.system:not(.ai-trace-message) {
    animation: aiIosFadeLift .34s var(--ios-open) both;
}
.ai-tool-trace {
    animation: aiIosFadeLift .42s var(--ios-open) both, aiIosTraceGlow .8s var(--ios-open) .06s both;
    transition:
        transform .34s var(--ios-bounce),
        border-color .28s ease,
        background .28s ease,
        box-shadow .34s var(--ios-open),
        filter .24s ease;
}
.ai-tool-trace:hover {
    transform: translate3d(0, -2px, 0) scale(1.004);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow: 0 16px 38px rgba(0,0,0,.16);
}
.ai-tool-trace:active { transform: scale(.992); }
.ai-tool-details summary {
    transition: transform .28s var(--ios-bounce), color .22s ease, opacity .22s ease;
}
.ai-tool-details summary:hover { transform: translateX(2px); }
.ai-tool-details[open] pre { animation: aiIosFadeLift .32s var(--ios-open) both; }
.ai-browser-preview,
.ai-browser-preview-body img {
    transition:
        transform .34s var(--ios-bounce),
        box-shadow .34s var(--ios-open),
        border-color .28s ease,
        filter .24s ease;
}
.ai-browser-preview:hover { transform: translate3d(0, -1px, 0); }
.ai-browser-preview-body img:hover { transform: scale(1.006); }
@media (max-width: 760px) {
    #settings-ai .check-line:hover,
    .ai-provider-item:hover,
    .ai-skill-item:hover,
    .ai-env-item:hover,
    .ai-memory-item:hover,
    .ai-plan-item:hover,
    .ai-tool-trace:hover,
    .ai-browser-preview:hover { transform: none; }
    #settings-ai .btn:active,
    #settings-ai .tool-btn:active,
    .ai-provider-modal .btn:active,
    .ai-provider-modal .tool-btn:active,
    .ai-header-actions .ui-btn:active,
    .ai-tool-btn:active,
    .ai-send-btn:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
    #settings-ai *,
    .ai-provider-modal *,
    .ai-agent-panel *,
    .ai-tool-trace,
    .ai-chat-row,
    .ai-chat-running-dot,
    .ai-message {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* 20260608: AI stop response button */
.ai-send-btn.ai-stop-mode {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--danger) 28%, transparent);
    animation: aiStopPulse 1.2s ease-in-out infinite;
}
@keyframes aiStopPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.045); filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-send-btn.ai-stop-mode { animation: none !important; }
}


/* ===== noVNC 重绘界面 ===== */
.novnc-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--visual-vh, var(--stable-vh, 100vh));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 12% -10%, rgba(10,132,255,.22), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(240,136,62,.16), transparent 32%),
        linear-gradient(135deg, #070b12 0%, #0b111c 46%, #05070b 100%);
}
.novnc-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 72%);
}
.novnc-topbar {
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(210px, auto) minmax(180px, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    padding: 10px;
    border: 1px solid rgba(139,148,158,.28);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 72%, rgba(8,12,20,.72));
    box-shadow: 0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(28px) saturate(1.55);
    -webkit-backdrop-filter: blur(28px) saturate(1.55);
}
.novnc-identity,
.novnc-status-card,
.novnc-toolbar { display: flex; align-items: center; min-width: 0; }
.novnc-identity { gap: 10px; }
.novnc-orb {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(10,132,255,.95), rgba(120,86,255,.82));
    box-shadow: 0 16px 38px rgba(10,132,255,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.novnc-orb span {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.92);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.16);
}
.novnc-title-group { display: grid; gap: 2px; min-width: 0; }
.novnc-title-group strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.novnc-eyebrow { color: var(--text-secondary); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.novnc-status-card {
    justify-self: stretch;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(139,148,158,.22);
    border-radius: 17px;
    background: rgba(255,255,255,.04);
    min-height: 42px;
}
.novnc-status-card em {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--text-secondary);
    font-style: normal;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.novnc-status-card.connected { border-color: rgba(63,185,80,.36); background: rgba(63,185,80,.08); }
.novnc-status-card.error { border-color: rgba(248,81,73,.42); background: rgba(248,81,73,.08); }
.novnc-toolbar {
    justify-content: flex-end;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.novnc-toolbar::-webkit-scrollbar { display: none; }
.novnc-tool,
.novnc-icon-btn,
.novnc-primary,
.novnc-secondary,
.novnc-panel-close,
.novnc-shortcut-grid button {
    border: 1px solid rgba(139,148,158,.28);
    color: var(--text);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    cursor: pointer;
    transition: transform .2s var(--ios-bounce), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.novnc-tool:hover,
.novnc-icon-btn:hover,
.novnc-secondary:hover,
.novnc-shortcut-grid button:hover { transform: translateY(-1px); border-color: rgba(10,132,255,.44); background: rgba(10,132,255,.12); }
.novnc-tool:active,
.novnc-icon-btn:active,
.novnc-primary:active,
.novnc-secondary:active,
.novnc-shortcut-grid button:active { transform: scale(.94); }
.novnc-tool {
    min-width: 66px;
    height: 42px;
    padding: 6px 10px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    gap: 1px;
}
.novnc-tool span { color: var(--text-secondary); font-size: 10px; font-weight: 800; }
.novnc-tool strong { font-size: 12px; }
.novnc-icon-btn {
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border-radius: 15px;
    font-weight: 900;
    white-space: nowrap;
}
.novnc-icon-btn.active { border-color: rgba(10,132,255,.55); background: rgba(10,132,255,.18); color: var(--accent); }
.novnc-icon-btn.danger { color: #ffb4ad; }
.novnc-icon-btn.danger:hover { border-color: rgba(248,81,73,.55); background: rgba(248,81,73,.14); }
.novnc-stage {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    margin: 10px;
    border: 1px solid rgba(139,148,158,.2);
    border-radius: 28px;
    overflow: hidden;
    outline: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(10,132,255,.08), transparent 42%),
        rgba(0,0,0,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 90px rgba(0,0,0,.32);
}
.novnc-screen-shell {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    overscroll-behavior: contain;
    background: #04070c;
}
.novnc-screen-bg {
    position: absolute;
    inset: 0;
    opacity: .78;
    background:
        linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.035) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.035) 75%);
    background-color: #05070a;
    background-size: 30px 30px;
    background-position: 0 0, 0 15px, 15px -15px, -15px 0;
}
.novnc-screen {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-width: 1px;
    min-height: 1px;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06);
}
.novnc-screen > div {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}
.novnc-screen canvas { outline: none; image-rendering: auto; }
.novnc-screen-shell.fit-mode .novnc-screen { max-width: 100%; max-height: 100%; }
.novnc-screen-shell.drag-mode { cursor: grab; }
.novnc-screen-shell.drag-mode:active { cursor: grabbing; }
.novnc-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background: radial-gradient(circle at 50% 40%, rgba(14,18,28,.76), rgba(4,7,12,.92));
    transition: opacity .26s ease, visibility .26s ease;
}
.novnc-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.novnc-overlay strong { font-size: 18px; }
.novnc-overlay span { max-width: 440px; color: var(--text-secondary); line-height: 1.55; }
.novnc-loader { display: flex; gap: 7px; }
.novnc-loader i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 18px rgba(10,132,255,.8);
    animation: novncLoader 1s ease-in-out infinite;
}
.novnc-loader i:nth-child(2) { animation-delay: .12s; }
.novnc-loader i:nth-child(3) { animation-delay: .24s; }
@keyframes novncLoader { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-8px); opacity: 1; } }
.novnc-mobile-input {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: .01;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    resize: none;
    pointer-events: none;
}
.novnc-panel {
    position: absolute;
    z-index: 35;
    right: 18px;
    top: 18px;
    width: min(430px, calc(100% - 36px));
    max-height: calc(100% - 36px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(139,148,158,.34);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 82%, rgba(8,12,20,.78));
    box-shadow: 0 34px 110px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(28px) saturate(1.55);
    -webkit-backdrop-filter: blur(28px) saturate(1.55);
    overflow: auto;
    transform: translate3d(0, 10px, 0) scale(.98);
    opacity: 0;
    transition: opacity .22s ease, transform .28s var(--ios-open);
}
.novnc-panel[hidden] { display: none !important; }
.novnc-panel.open { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.novnc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: grab; }
.novnc-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1;
}
.novnc-panel label { color: var(--text-secondary); font-size: 12px; font-weight: 900; }
.novnc-panel textarea {
    width: 100%;
    min-height: 92px;
    border: 1px solid rgba(139,148,158,.28);
    border-radius: 16px;
    padding: 10px 12px;
    background: rgba(0,0,0,.25);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.45;
    outline: none;
    resize: vertical;
}
.novnc-panel textarea:focus { border-color: rgba(10,132,255,.62); box-shadow: 0 0 0 3px rgba(10,132,255,.14); }
.novnc-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.novnc-primary,
.novnc-secondary {
    height: 36px;
    padding: 0 13px;
    border-radius: 13px;
    font-weight: 850;
}
.novnc-primary { border-color: rgba(10,132,255,.52); background: linear-gradient(135deg, rgba(10,132,255,.96), rgba(120,86,255,.86)); color: #fff; }
.novnc-panel-actions span,
.novnc-panel-note { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.novnc-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 8px;
}
.novnc-shortcut-grid button {
    height: 38px;
    border-radius: 13px;
    font-weight: 850;
}
.novnc-stage.bell { animation: novncBell .28s ease; }
@keyframes novncBell { 0%, 100% { filter: none; } 50% { filter: brightness(1.26); } }
@media (max-width: 760px) {
    .novnc-topbar {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: max(6px, env(safe-area-inset-top)) 6px 0;
        padding: 8px;
        border-radius: 20px;
    }
    .novnc-orb { width: 36px; height: 36px; border-radius: 14px; }
    .novnc-status-card { min-height: 36px; padding: 7px 10px; }
    .novnc-toolbar { justify-content: flex-start; padding-bottom: 1px; }
    .novnc-tool { min-width: 60px; height: 38px; border-radius: 14px; }
    .novnc-icon-btn { min-width: 38px; height: 38px; border-radius: 14px; }
    .novnc-stage { margin: 6px; border-radius: 22px; }
    .novnc-panel { inset: auto 8px 8px 8px; width: auto; max-height: min(72%, 520px); border-radius: 22px; }
    .novnc-shortcut-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .novnc-page *, .novnc-page *::before, .novnc-page *::after { animation: none !important; transition-duration: .01ms !important; }
}


/* 20260608: align AI floating panel chrome with SSH file-manager */
.ai-agent-panel.file-manager {
    border-radius: var(--radius-lg) !important;
    transform-origin: var(--panel-origin-x, 50%) var(--panel-origin-y, 0%);
    transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease,
        filter 0.32s ease,
        visibility 0.36s;
}
.ai-agent-panel .panel-drag-handle {
    height: 28px !important;
    background: color-mix(in srgb, var(--border) 34%, transparent) !important;
}
.ai-agent-panel .panel-traffic-btn {
    --panel-island-w: 58px;
    --panel-island-h: 22px;
    cursor: grab;
}
.ai-agent-panel.dragging .panel-drag-handle,
.ai-agent-panel.dragging .panel-traffic-btn { cursor: grabbing; }
.ai-agent-panel .panel-resize-handle {
    width: 38px !important;
    height: 38px !important;
    bottom: 8px !important;
    z-index: 5;
    opacity: 0.62;
    border-radius: var(--radius-lg) !important;
}
.ai-agent-panel .panel-resize-handle.right { right: 4px !important; }
.ai-agent-panel .panel-resize-handle.left { left: 4px !important; }
.ai-agent-panel .panel-resize-handle::before {
    width: 31px !important;
    height: 31px !important;
    border-width: 0 3px 3px 0 !important;
    border-bottom-right-radius: var(--radius-lg) !important;
}
.ai-agent-panel .panel-resize-handle.left::before {
    border-width: 0 0 3px 3px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: var(--radius-lg) !important;
}
.ai-agent-panel.resizing .panel-resize-handle,
.ai-agent-panel .panel-resize-handle:hover { opacity: 0.95; }

@media (max-width: 760px) {
    .ai-agent-panel.file-manager {
        border-radius: var(--radius-lg) !important;
        will-change: transform, opacity, filter;
    }
    .ai-agent-panel.panel-opening {
        animation: floatingPanelOpenFromButton .36s cubic-bezier(.16, 1, .3, 1) both !important;
    }
    .ai-agent-panel.panel-closing {
        animation: floatingPanelCloseToButton .28s cubic-bezier(.4, 0, .2, 1) both !important;
    }
    .ai-agent-panel .panel-drag-handle { height: 28px !important; }
    .ai-agent-panel .panel-resize-handle {
        display: block !important;
        width: 38px !important;
        height: 38px !important;
        bottom: 8px !important;
        opacity: 0.62;
    }
}


/* 20260608: unify top AI button and macOS-style AI input bar */
.nav-actions .ai-floating-btn,
.nav-actions .ai-floating-btn.active,
.nav-actions .ai-floating-btn:not(.active) {
    background: var(--surface) !important;
    color: var(--accent-hover) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}
.nav-actions .ai-floating-btn:hover,
.nav-actions .ai-floating-btn.active:hover {
    background: var(--bg) !important;
    border-color: var(--text-secondary) !important;
}

.ai-agent-panel {
    --ai-mac-input-bg: rgba(28, 28, 30, 0.85);
    --ai-mac-input-border: rgba(255, 255, 255, 0.10);
    --ai-mac-field-bg: rgba(255, 255, 255, 0.10);
    --ai-mac-focus-bg: rgba(44, 44, 46, 0.94);
    --ai-mac-primary: var(--accent);
    --ai-mac-primary-shadow: var(--accent-glow, rgba(10,132,255,.28));
    --ai-mac-icon-color: var(--accent-hover);
    --ai-mac-text: #ffffff;
    --ai-mac-placeholder: #636366;
}
:root[data-theme="light"] .ai-agent-panel {
    --ai-mac-input-bg: rgba(245, 245, 247, 0.85);
    --ai-mac-input-border: rgba(0, 0, 0, 0.08);
    --ai-mac-field-bg: rgba(255, 255, 255, 0.65);
    --ai-mac-focus-bg: rgba(255, 255, 255, 0.95);
    --ai-mac-icon-color: #8E8E93;
    --ai-mac-text: #1D1D1F;
    --ai-mac-placeholder: #AEAEB2;
}
.ai-agent-panel .ai-input-area {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 0 0 auto;
    min-height: 46px;
    margin: 10px 44px 12px;
    padding: 6px 6px 6px 14px !important;
    border: 1px solid var(--ai-mac-input-border) !important;
    border-radius: 24px;
    background: var(--ai-mac-input-bg) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ai-agent-panel .ai-input-area:focus-within {
    border-color: var(--accent-soft-border, var(--accent)) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05), 0 0 0 3px var(--ai-mac-primary-shadow);
    background: var(--ai-mac-focus-bg) !important;
}
.ai-agent-panel .ai-tool-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    padding: 8px !important;
    margin: 0 4px 0 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--ai-mac-icon-color) !important;
    box-shadow: none !important;
    font-size: 0 !important;
}
.ai-agent-panel .ai-tool-btn:hover {
    background: color-mix(in srgb, var(--ai-mac-text) 7%, transparent) !important;
    color: var(--ai-mac-text) !important;
    box-shadow: none !important;
    transform: none;
}
.ai-agent-panel .ai-tool-btn:active { transform: scale(.92); }
.ai-agent-panel .ai-tool-btn svg { width: 20px; height: 20px; display: block; }
.ai-agent-panel .ai-input-box {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 32px !important;
    max-height: 140px;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ai-mac-text) !important;
    box-shadow: none !important;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    resize: none;
}
.ai-agent-panel .ai-input-box:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
.ai-agent-panel .ai-input-box::placeholder { color: var(--ai-mac-placeholder); font-size: 14px; }
.ai-agent-panel .ai-send-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 0 0 8px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ai-mac-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px var(--ai-mac-primary-shadow) !important;
    font-size: 0 !important;
}
.ai-agent-panel .ai-send-btn:hover { filter: brightness(1.05); box-shadow: 0 2px 6px var(--ai-mac-primary-shadow) !important; }
.ai-agent-panel .ai-send-btn:active { transform: scale(.92); }
.ai-agent-panel .ai-send-btn svg { width: 14px; height: 14px; display: block; }
.ai-agent-panel .ai-send-btn.ai-stop-mode {
    background: var(--danger) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--danger) 34%, transparent) !important;
}
.ai-agent-panel .ai-send-btn.ai-stop-mode svg { width: 13px; height: 13px; }
.ai-agent-panel.ai-narrow .ai-input-area { margin: 8px 36px 10px; padding: 5px 5px 5px 10px !important; }
@media (max-width: 760px) {
    .ai-agent-panel .ai-input-area { margin: 8px 42px 10px; padding: 6px 6px 6px 12px !important; }
    .ai-agent-panel .ai-tool-btn { width: 34px !important; height: 34px !important; padding: 7px !important; }
    .ai-agent-panel .ai-input-box { min-height: 32px !important; font-size: 14px; }
    .ai-agent-panel .ai-send-btn { width: 32px !important; height: 32px !important; }
}

/* 20260609: AI true morph open/close. Floating window only; background stays interactive and unfiltered. */
.nav-actions .ai-floating-btn {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 30px;
    min-width: 42px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    transform: translateZ(0);
    will-change: transform, opacity, box-shadow;
    transition:
        transform .10s ease,
        opacity .15s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}
.nav-actions .ai-floating-btn[data-ai-morph-source="1"] {
    opacity: .74 !important;
    color: var(--accent-hover) !important;
    -webkit-text-fill-color: currentColor !important;
}
.nav-actions .ai-floating-btn[data-ai-morph-source="1"]::before {
    opacity: .28;
}
.nav-actions .ai-floating-btn:active {
    transform: scale(.92);
    box-shadow: 0 2px 6px rgba(0,0,0,.18) !important;
}
.ai-agent-panel.ai-morphing {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    transform-origin: center center;
    will-change: top, left, width, height, border-radius, box-shadow;
    contain: layout paint style;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.ai-agent-panel.ai-morphing .panel-drag-handle,
.ai-agent-panel.ai-morphing .ai-agent-window,
.ai-agent-panel.ai-morphing .panel-resize-handle {
    transition: opacity .12s cubic-bezier(.4, 0, 1, 1), transform .12s ease !important;
}
.ai-agent-panel.ai-morphing::before {
    content: 'AI';
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity .10s ease;
}
.ai-agent-panel.ai-morphing.ai-morph-open::before,
.ai-agent-panel.ai-morphing.ai-morph-closing::before {
    opacity: 0;
}
.ai-agent-panel.ai-morphing .panel-drag-handle,
.ai-agent-panel.ai-morphing .ai-agent-window,
.ai-agent-panel.ai-morphing .panel-resize-handle {
    opacity: 0;
    transform: scale(.985);
    pointer-events: none;
}
.ai-agent-panel.ai-morphing.ai-morph-open .panel-drag-handle,
.ai-agent-panel.ai-morphing.ai-morph-open .ai-agent-window,
.ai-agent-panel.ai-morphing.ai-morph-open .panel-resize-handle {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition: opacity .28s ease-out .14s, transform .45s var(--ai-morph-spring-open) .14s !important;
}
.ai-agent-panel.ai-morphing.ai-morph-closing .panel-drag-handle,
.ai-agent-panel.ai-morphing.ai-morph-closing .ai-agent-window,
.ai-agent-panel.ai-morphing.ai-morph-closing .panel-resize-handle {
    opacity: 0;
    transform: scale(.985);
    transition: opacity .12s ease, transform .12s ease !important;
}
.ai-agent-panel.ai-morphing .ai-agent-window,
.ai-agent-panel.ai-morphing.open .ai-agent-window,
.ai-agent-panel.ai-morphing.open .ai-title-bar,
.ai-agent-panel.ai-morphing.open .ai-browser-preview,
.ai-agent-panel.ai-morphing.open .ai-input-area {
    animation: none !important;
}
/* AI floating morph has no backdrop transform, even in reduced-motion mode. */

/* ===== AI Markdown / code blocks / message context menu ===== */
.ai-message { user-select: text; -webkit-user-select: text; }
.ai-message p { margin: 0 0 10px; }
.ai-message p:last-child { margin-bottom: 0; }
.ai-message h1, .ai-message h2, .ai-message h3, .ai-message h4, .ai-message h5, .ai-message h6 {
    margin: 6px 0 10px; line-height: 1.25; color: var(--text); font-weight: 780;
}
.ai-message h1 { font-size: 1.35em; }
.ai-message h2 { font-size: 1.22em; }
.ai-message h3 { font-size: 1.12em; }
.ai-message ul, .ai-message ol { margin: 8px 0 10px 1.25em; padding: 0; }
.ai-message li { margin: 3px 0; }
.ai-message blockquote {
    margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; color: var(--text-secondary);
}
.ai-message hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.ai-message a { color: var(--accent-hover); text-decoration: none; }
.ai-message a:hover { text-decoration: underline; }
.ai-message code {
    font-family: var(--font-mono); font-size: .92em; padding: 2px 5px; border-radius: 6px;
    background: color-mix(in srgb, var(--bg) 75%, #000); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.ai-message .ai-md-image { max-width: 100%; border-radius: 12px; border: 1px solid var(--border); display: block; margin: 8px 0; }
.ai-md-table-wrap { max-width: 100%; overflow-x: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 78%, var(--bg)); }
.ai-md-table-wrap table { width: 100%; border-collapse: collapse; min-width: 360px; white-space: normal; }
.ai-md-table-wrap th, .ai-md-table-wrap td { padding: 9px 11px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ai-md-table-wrap th { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 760; }
.ai-md-table-wrap tr:last-child td { border-bottom: 0; }
.ai-code-block {
    margin: 12px 0; overflow: hidden; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: #070809; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.ai-code-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px 8px 12px; background: color-mix(in srgb, var(--surface) 76%, #050607); border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.ai-code-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--font-mono); color: var(--text-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-code-name i { color: #34d399; font-style: normal; }
.ai-code-actions { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.ai-code-actions button {
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius: 9px; padding: 4px 8px;
    background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text-secondary); cursor: pointer; font-size: 12px; line-height: 1.25;
    transition: transform .14s ease, color .16s ease, background .16s ease, border-color .16s ease;
}
.ai-code-actions button:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 44%, var(--border)); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.ai-code-actions button:active { transform: scale(.94); }
.ai-code-block pre { margin: 0 !important; border: 0 !important; border-radius: 0 !important; max-height: 52vh !important; background: #070809 !important; color: #d1d5db; white-space: pre !important; overflow: auto !important; }
.ai-code-block pre code { display: block; border: 0; background: transparent; padding: 0; color: inherit; white-space: pre; }
.ai-code-preview-frame { width: 100%; min-height: 360px; height: min(54vh, 560px); border: 0; background: #fff; border-radius: 0 0 12px 12px; }
.ai-message.user .ai-code-block { border-color: rgba(255,255,255,.18); }
.ai-message.user .ai-code-toolbar { background: rgba(0,0,0,.18); border-bottom-color: rgba(255,255,255,.14); }
.ai-message.user .ai-code-actions button { color: rgba(255,255,255,.86); border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.10); }
.ai-agent-panel .ai-input-area { flex-wrap: wrap !important; }
.ai-agent-panel .ai-md-toggle { font-size: 11px !important; font-weight: 800; letter-spacing: .02em; }
.ai-agent-panel .ai-md-toggle.active { color: #fff !important; background: var(--ai-mac-primary) !important; }
.ai-input-preview {
    flex: 1 0 100%; order: 10; max-height: 180px; overflow: auto; margin: 6px 4px 2px 0; padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--ai-mac-input-border)); border-radius: 16px;
    background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--text); font-size: 13px; line-height: 1.48;
}
.ai-input-preview:empty::before { content: '（空）'; color: var(--text-secondary); }
.ai-input-preview .ai-code-toolbar { padding: 6px 8px; }
.ai-input-preview .ai-code-actions { display: none; }
.ai-message-menu {
    position: fixed; z-index: 20020; width: 184px; padding: 7px; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, rgba(20,22,25,.95));
    box-shadow: 0 18px 48px rgba(0,0,0,.36); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    transform: scale(.96); opacity: 0; transform-origin: top left; transition: opacity .14s ease, transform .14s ease;
}
.ai-message-menu.open { opacity: 1; transform: scale(1); }
.ai-message-menu.hidden { display: none; }
.ai-message-menu button {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 11px;
    background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; font-size: 13px;
}
.ai-message-menu button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ai-message-menu button:active { transform: scale(.98); }
.ai-message-menu button span { width: 18px; color: var(--text-secondary); text-align: center; }
@media (max-width: 760px) {
    .ai-code-actions button { padding: 4px 6px; font-size: 11px; }
    .ai-code-toolbar { padding-inline: 9px; }
    .ai-code-name { font-size: 11px; }
    .ai-input-preview { max-height: 132px; font-size: 12px; }
    .ai-message-menu { width: 176px; }
}

.ai-message.ai, .ai-message.user, .ai-message.system:not(.ai-trace-message) { white-space: normal; }
.ai-message.ai > *, .ai-message.user > *, .ai-message.system:not(.ai-trace-message) > * { max-width: 100%; }

.ai-message.user h1, .ai-message.user h2, .ai-message.user h3, .ai-message.user h4, .ai-message.user h5, .ai-message.user h6,
.ai-message.user p, .ai-message.user li, .ai-message.user blockquote { color: inherit; }
.ai-message.user a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.ai-message.user code { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }


/* AI code block polish: keep light mode aligned with Zephyr's soft surface style. */
:root[data-theme="light"] .ai-code-block {
    background: color-mix(in srgb, var(--surface) 92%, var(--bg)) !important;
    border-color: color-mix(in srgb, var(--border) 86%, var(--accent) 8%) !important;
    box-shadow: 0 10px 28px rgba(31,35,40,.08), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
:root[data-theme="light"] .ai-code-toolbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white), color-mix(in srgb, var(--bg) 86%, var(--surface))) !important;
    border-bottom-color: color-mix(in srgb, var(--border) 78%, transparent) !important;
}
:root[data-theme="light"] .ai-code-name { color: color-mix(in srgb, var(--text-secondary) 92%, var(--text)); }
:root[data-theme="light"] .ai-code-name i { color: var(--accent-hover); }
:root[data-theme="light"] .ai-code-actions button {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
    color: var(--text-secondary) !important;
    border-color: color-mix(in srgb, var(--border) 80%, var(--accent) 10%) !important;
}
:root[data-theme="light"] .ai-code-actions button:hover {
    background: color-mix(in srgb, var(--accent) 13%, var(--surface)) !important;
    color: var(--accent-hover) !important;
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
}
:root[data-theme="light"] .ai-code-block pre {
    background: #f6f8fa !important;
    color: #1f2328 !important;
}
:root[data-theme="light"] .ai-code-block pre code {
    color: #1f2328 !important;
}
.ai-md-toggle,
#aiMarkdownPreviewBtn { display: none !important; }

/* 20260614: noVNC rewritten to match SSH/RDP chrome */
.novnc-page.rdp-page {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
:root[data-theme="light"] .novnc-page.rdp-page {
    background: #ffffff !important;
}
.novnc-page .novnc-topbar.terminal-topbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--surface);
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
    margin: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.novnc-page .novnc-topbar .status {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    font-weight: 500;
}
.novnc-page .novnc-topbar .info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.novnc-page .novnc-topbar .info strong {
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
}
.novnc-page .novnc-toolbar.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.novnc-page .novnc-toolbar.topbar-actions::-webkit-scrollbar { height: 0; }
.novnc-page .novnc-toolbar.topbar-actions:hover { scrollbar-width: thin; }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon]::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background: var(--vnc-toolbar-icon-color, currentColor);
    -webkit-mask: var(--vnc-toolbar-icon) center / contain no-repeat;
    mask: var(--vnc-toolbar-icon) center / contain no-repeat;
}
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="quality"] { --vnc-toolbar-icon-color: #d9aa18; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="fit"] { --vnc-toolbar-icon-color: #4aa3df; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v2H7.4l4.1 4.1-1.4 1.4L6 7.4V11H4V4zm9 0h7v7h-2V7.4l-4.1 4.1-1.4-1.4L16.6 6H13V4zM4 13h2v3.6l4.1-4.1 1.4 1.4L7.4 18H11v2H4v-7zm14 0h2v7h-7v-2h3.6l-4.1-4.1 1.4-1.4 4.1 4.1V13z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="joystick"] { --vnc-toolbar-icon-color: #ffb14f; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 9h10a5 5 0 0 1 4.8 3.6l.8 3A3.5 3.5 0 0 1 19.2 20c-1 0-1.9-.4-2.6-1.1L14.7 17H9.3l-1.9 1.9A3.7 3.7 0 0 1 4.8 20a3.5 3.5 0 0 1-3.4-4.4l.8-3A5 5 0 0 1 7 9zm1 3H6v2H4v2h2v2h2v-2h2v-2H8v-2zm8.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM18 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM11 4h2v5h-2V4z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="clipboard"] { --vnc-toolbar-icon-color: #9a6a3a; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h3v16H5V5h3l1-2zm1 4h4l1-2h-6l1 2zm-3 1v11h10V8h-2v2H9V8H7z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="keyboard"] { --vnc-toolbar-icon-color: #6b7684; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="shortcuts"] { --vnc-toolbar-icon-color: #d9aa18; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="security"] { --vnc-toolbar-icon-color: #0a84ff; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 5 5v6c0 4.6 2.9 8.8 7 10 4.1-1.2 7-5.4 7-10V5l-7-3zm0 3.2 5 2.1V11c0 3.3-2 6.4-5 7.6-3-1.2-5-4.3-5-7.6V7.3l5-2.1zM11 8h2v5h-2V8zm0 7h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="reconnect"] { --vnc-toolbar-icon-color: #0a84ff; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.76-4.24L13 11h8V3l-3.3 3.3z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon="disconnect"] { --vnc-toolbar-icon-color: #f85149; --vnc-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v2H7V3zm4 4h2v7h-2V7zm-5.6 3.2 1.5 1.3A6 6 0 1 0 17.1 11.5l1.5-1.3a8 8 0 1 1-13.2 0z'/%3E%3C/svg%3E"); }
.novnc-page .novnc-stage.rdp-stage {
    flex: 1 1 auto;
    min-height: 0;
    margin: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(10,132,255,.12), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(240,136,62,.10), transparent 30%),
        var(--bg);
    display: grid;
    place-items: center;
    outline: none;
    contain: layout paint;
}
:root[data-theme="light"] .novnc-page .novnc-stage.rdp-stage {
    background:
        radial-gradient(circle at 20% 0%, rgba(0,122,255,.10), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(154,103,0,.08), transparent 30%),
        #ffffff;
}
.novnc-page .novnc-screen-shell.rdp-display-shell {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: none;
    background:
        linear-gradient(45deg, color-mix(in srgb, var(--text) 3%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--text) 3%, transparent) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--text) 3%, transparent) 75%),
        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--text) 3%, transparent) 75%),
        var(--bg);
    background-size: 28px 28px;
    background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}
.novnc-page .novnc-screen-bg { display: none; }
.novnc-page .novnc-screen.rdp-display {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    justify-self: stretch;
    display: grid;
    place-items: center;
    transform-origin: center center;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background: transparent;
}
.novnc-page .novnc-screen.rdp-display > div {
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}
.novnc-page .novnc-screen canvas {
    display: block;
    outline: none;
    image-rendering: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.novnc-page .novnc-screen.rdp-display > div,
.novnc-page .novnc-screen-shell.rdp-display-shell {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.novnc-page .novnc-overlay.terminal-overlay {
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.novnc-page .novnc-overlay.terminal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.novnc-page .novnc-overlay .subtle {
    max-width: 520px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}
.novnc-page .novnc-panel.rdp-floating-panel {
    --panel-origin-x: 50%;
    --panel-origin-y: 0%;
    transform-origin: var(--panel-origin-x) var(--panel-origin-y);
    position: absolute;
    z-index: 30;
    min-width: 300px;
    min-height: 240px;
    padding: 0;
    border: 1px solid rgba(139,148,158,.34);
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, rgba(255,255,255,.12)), color-mix(in srgb, var(--surface) 82%, transparent)),
        color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 28px 90px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(28px) saturate(1.62);
    -webkit-backdrop-filter: blur(28px) saturate(1.62);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.985);
    transition:
        opacity .24s ease,
        visibility .24s ease,
        transform .34s cubic-bezier(.16,1,.3,1),
        box-shadow .24s ease,
        left .34s cubic-bezier(.16,1,.3,1),
        top .34s cubic-bezier(.16,1,.3,1),
        width .34s cubic-bezier(.16,1,.3,1),
        height .34s cubic-bezier(.16,1,.3,1);
}
.novnc-page .novnc-panel.rdp-floating-panel[hidden] {
    display: flex !important;
    pointer-events: none;
}
.novnc-page .novnc-panel.rdp-floating-panel.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0,0,0) scale(1);
}
.novnc-page .novnc-panel.rdp-floating-panel.front {
    z-index: 42;
    box-shadow: 0 34px 110px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.13);
}
.novnc-page .novnc-panel.rdp-floating-panel.front-switching {
    animation: panelFrontSwitch .28s cubic-bezier(.2,.8,.2,1);
}
.novnc-page .novnc-panel.rdp-floating-panel.dragging,
.novnc-page .novnc-panel.rdp-floating-panel.resizing {
    transition: none;
    user-select: none;
    touch-action: none;
}
.novnc-page .novnc-panel.rdp-floating-panel.layout-animating {
    transition:
        left .62s var(--ios-open),
        top .62s var(--ios-open),
        width .62s var(--ios-open),
        height .62s var(--ios-open),
        transform .72s var(--ios-bounce),
        opacity .2s ease;
}
.novnc-page .novnc-panel .panel-drag-handle {
    height: 30px;
    background: color-mix(in srgb, var(--border) 30%, rgba(255,255,255,.08));
}
.novnc-page .novnc-panel .rdp-panel-content {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.novnc-page .novnc-panel .rdp-panel-textarea {
    width: 100%;
    min-height: 76px;
    max-height: 160px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.45;
    outline: none;
    resize: vertical;
    user-select: text;
    -webkit-user-select: text;
}
.novnc-page .novnc-panel .rdp-panel-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,.12);
}
.novnc-page .novnc-panel .rdp-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 6px;
    overflow: auto;
    min-height: 0;
}
.novnc-page .novnc-panel .rdp-shortcut-grid .tool-btn {
    min-width: 0;
    width: 100%;
    min-height: 34px;
    padding: 6px 7px;
    font-size: 11px;
    background: var(--bg);
}
.novnc-page .joystick-panel.rdp-floating-panel {
    min-width: 248px;
    min-height: 220px;
    overflow: hidden;
}
.novnc-page .joystick-panel .joystick-panel-content {
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    padding: 12px;
}
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .novnc-page .novnc-topbar.terminal-topbar { padding: 6px 10px; }
    .novnc-page .novnc-toolbar .btn-sm[data-vnc-icon] { gap: 0; }
    .novnc-page .novnc-toolbar .btn-sm[data-vnc-icon]::before { width: 21px; height: 21px; flex-basis: 21px; }
    .novnc-page .novnc-stage.rdp-stage { margin: 4px; border-radius: 10px; }
    .novnc-page .novnc-panel.rdp-floating-panel { min-width: 260px; min-height: 220px; border-radius: 18px; }
    .novnc-page .novnc-panel .rdp-panel-content { padding: 10px; }
    .novnc-page .novnc-panel .rdp-shortcut-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===== Terminal smartbar: locked to the expanded nav shelf ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-smartbar {
        top: calc(var(--smartbar-top) - var(--smartbar-shelf-offset)) !important;
        left: 50% !important;
        right: auto !important;
        width: 0 !important;
        height: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 82 !important;
        pointer-events: none !important;
        transition: top var(--terminal-shelf-duration) var(--terminal-shelf-ease) !important;
    }
    .smartbar-handle {
        top: 0 !important;
        left: 50% !important;
        width: 118px !important;
        height: var(--smartbar-handle-height) !important;
        transform: translate3d(-50%, calc(-1 * var(--terminal-shelf-line-travel)), 0) scaleX(.96) !important;
        opacity: 0 !important;
        clip-path: inset(0 0 100% 0 round 999px) !important;
        pointer-events: none !important;
        transition:
            transform var(--terminal-shelf-duration) var(--terminal-shelf-ease),
            opacity var(--terminal-shelf-duration) linear,
            clip-path var(--terminal-shelf-duration) var(--terminal-shelf-ease) !important;
    }
    .smartbar-handle span {
        width: 74px !important;
        height: 4px !important;
        background: color-mix(in srgb, var(--text-secondary) 58%, transparent) !important;
    }
    body.terminal-mode .terminal-smartbar .smartbar-handle,
    body.terminal-mode-entering .terminal-smartbar .smartbar-handle,
    .terminal-smartbar.open .smartbar-handle,
    .terminal-smartbar.closing .smartbar-handle {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0 round 999px) !important;
        pointer-events: auto !important;
        transform: translate3d(-50%, 0, 0) scaleX(1) !important;
    }
    body:not(.terminal-mode) .terminal-smartbar:not(.open):not(.closing) .smartbar-handle {
        opacity: 0 !important;
        clip-path: inset(0 0 100% 0 round 999px) !important;
        pointer-events: none !important;
        transform: translate3d(-50%, calc(-1 * var(--terminal-shelf-line-travel)), 0) scaleX(.96) !important;
    }
    body.terminal-mode-entering .terminal-smartbar .smartbar-handle {
        animation: none !important;
    }
    .terminal-smartbar .smartbar-panel {
        top: var(--smartbar-panel-drop) !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: calc(var(--smartbar-top) - var(--smartbar-shelf-offset)) !important;
        left: 50% !important;
        right: auto !important;
        width: 0 !important;
        transform: translateX(-50%) !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        position: absolute !important;
        top: var(--smartbar-panel-drop) !important;
        left: 50% !important;
        width: min(max-content, calc(100vw - 36px)) !important;
        max-width: min(760px, calc(100vw - 36px)) !important;
        transform-origin: top center !important;
        transform: translate3d(-50%, -18px, 0) scale3d(.46, .20, 1) !important;
        border-radius: 30px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        transform: translate3d(-50%, 0, 0) scale3d(1, 1, 1) !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.closing .smartbar-panel {
        animation: smartbarPanelMacClose .72s var(--terminal-shelf-ease) both !important;
    }
}


/* ===== Zephyr palettes and user customization ===== */
:root {
    --accent-soft-bg: rgba(10,132,255,.10);
    --accent-soft-border: rgba(10,132,255,.24);
    --accent-glow: rgba(10,132,255,.16);
    --zephyr-icon-main: #eef2f7;
    --zephyr-icon-mid: #a8b5c3;
    --zephyr-icon-dark: #6e7b88;
    --zephyr-icon-glow: rgba(10, 132, 255, 0.12);
    --zephyr-icon-title: #0a84ff;
    --zephyr-icon-dot-a: #0a84ff;
    --zephyr-icon-dot-b: #8e99a6;
    --zephyr-icon-grad-start: #eef2f7;
    --zephyr-icon-grad-mid: #a8b5c3;
    --zephyr-icon-grad-end: #6e7b88;
    --zephyr-icon-grad-mid-offset: 58%;
}
:root[data-theme="dark"][data-color-scheme="frost"] {
    color-scheme: dark;
    --bg: #101114;
    --surface: #1b1c20;
    --border: #303237;
    --text: #f4f4f6;
    --text-secondary: #9a9ca3;
    --accent: #0a84ff;
    --accent-hover: #2997ff;
    --danger: #ff453a;
    --success: #32d74b;
    --warning: #ffd60a;
    --bg-main: #101114;
    --bg-card: #1b1c20;
    --color-primary: #0a84ff;
    --brand-icon-color: var(--zephyr-icon-title);
    --protocol-badge-bg: rgba(10,132,255,.10);
    --protocol-badge-fg: #7ab8ff;
    --accent-soft-bg: rgba(10,132,255,.10);
    --accent-soft-border: rgba(10,132,255,.24);
    --accent-glow: rgba(10,132,255,.16);
    --wterm-selection: rgba(10,132,255,0.24);
}
:root[data-theme="light"][data-color-scheme="frost"] {
    color-scheme: light;
    --bg: #f5f5f7;
    --surface: #ffffff;
    --border: #dedee3;
    --text: #1d1d1f;
    --text-secondary: #6e6e73;
    --accent: #007aff;
    --accent-hover: #006bd6;
    --danger: #d70015;
    --success: #248a3d;
    --warning: #b26a00;
    --bg-main: #f5f5f7;
    --bg-card: #ffffff;
    --color-primary: #007aff;
    --brand-icon-color: var(--zephyr-icon-title);
    --protocol-badge-bg: rgba(0,122,255,.10);
    --protocol-badge-fg: #0057b8;
    --accent-soft-bg: rgba(0,122,255,.08);
    --accent-soft-border: rgba(0,122,255,.20);
    --accent-glow: rgba(0,122,255,.12);
    --terminal-bg: #f5f5f7;
    --wterm-selection: rgba(0,122,255,.20);
}
:root[data-theme="dark"][data-color-scheme="lava"] {
    color-scheme: dark;
    --bg: #12110f;
    --surface: #1e1c19;
    --border: #36312c;
    --text: #f5f2ee;
    --text-secondary: #a39d95;
    --accent: #bf5a1f;
    --accent-hover: #d06a2c;
    --danger: #ff453a;
    --success: #30d158;
    --warning: #d49328;
    --bg-main: #12110f;
    --bg-card: #1e1c19;
    --color-primary: #bf5a1f;
    --brand-icon-color: var(--zephyr-icon-title);
    --protocol-badge-bg: rgba(191,90,31,.11);
    --protocol-badge-fg: #d9a073;
    --accent-soft-bg: rgba(191,90,31,.10);
    --accent-soft-border: rgba(191,90,31,.24);
    --accent-glow: rgba(191,90,31,.15);
    --wterm-selection: rgba(191,90,31,.24);
}
:root[data-theme="light"][data-color-scheme="lava"] {
    color-scheme: light;
    --bg: #f7f3ef;
    --surface: #ffffff;
    --border: #e1d8cf;
    --text: #2b241f;
    --text-secondary: #746860;
    --accent: #b85c22;
    --accent-hover: #9f4e1d;
    --danger: #d70015;
    --success: #248a3d;
    --warning: #a35f00;
    --bg-main: #f7f3ef;
    --bg-card: #ffffff;
    --color-primary: #b85c22;
    --brand-icon-color: var(--zephyr-icon-title);
    --protocol-badge-bg: rgba(184,92,34,.10);
    --protocol-badge-fg: #7c3d16;
    --accent-soft-bg: rgba(184,92,34,.08);
    --accent-soft-border: rgba(184,92,34,.20);
    --accent-glow: rgba(184,92,34,.12);
    --wterm-selection: rgba(184,92,34,.20);
}
:root[data-theme="dark"][data-color-scheme="asagi"] {
    color-scheme: dark;
    --bg: #0f1414;
    --surface: #1a2020;
    --border: #2d3937;
    --text: #edf3f2;
    --text-secondary: #93a09e;
    --accent: #4d9c8a;
    --accent-hover: #62ad9b;
    --danger: #ff5a66;
    --success: #36c98f;
    --warning: #d7a446;
    --bg-main: #0f1414;
    --bg-card: #1a2020;
    --color-primary: #4d9c8a;
    --brand-icon-color: var(--zephyr-icon-title);
    --protocol-badge-bg: rgba(77,156,138,.11);
    --protocol-badge-fg: #8fc8bb;
    --accent-soft-bg: rgba(77,156,138,.10);
    --accent-soft-border: rgba(77,156,138,.24);
    --accent-glow: rgba(77,156,138,.14);
    --wterm-selection: rgba(77,156,138,.24);
}
:root[data-theme="light"][data-color-scheme="asagi"] {
    color-scheme: light;
    --bg: #f3f6f5;
    --surface: #ffffff;
    --border: #d8e1df;
    --text: #1f2625;
    --text-secondary: #657270;
    --accent: #3f8f82;
    --accent-hover: #357a70;
    --danger: #c2414a;
    --success: #248a64;
    --warning: #9a6700;
    --bg-main: #f3f6f5;
    --bg-card: #ffffff;
    --color-primary: #3f8f82;
    --brand-icon-color: var(--zephyr-icon-title);
    --protocol-badge-bg: rgba(63,143,130,.10);
    --protocol-badge-fg: #285f57;
    --accent-soft-bg: rgba(63,143,130,.08);
    --accent-soft-border: rgba(63,143,130,.20);
    --accent-glow: rgba(63,143,130,.12);
    --wterm-selection: rgba(63,143,130,.20);
}
:root[data-theme="dark"][data-color-scheme="cyber"] {
    color-scheme: dark;
    --bg: #0d1114;
    --surface: #171c20;
    --border: #2d343a;
    --text: #edf2f5;
    --text-secondary: #909aa3;
    --accent: #4f9da6;
    --accent-hover: #67b0b8;
    --danger: #ff453a;
    --success: #32d74b;
    --warning: #d7a446;
    --bg-main: #0d1114;
    --bg-card: #171c20;
    --color-primary: #4f9da6;
    --brand-icon-color: var(--zephyr-icon-title);
    --protocol-badge-bg: rgba(79,157,166,.11);
    --protocol-badge-fg: #96c8ce;
    --accent-soft-bg: rgba(79,157,166,.10);
    --accent-soft-border: rgba(79,157,166,.24);
    --accent-glow: rgba(79,157,166,.14);
    --wterm-selection: rgba(79,157,166,.24);
}
:root[data-theme="light"][data-color-scheme="cyber"] {
    color-scheme: light;
    --bg: #f3f5f6;
    --surface: #ffffff;
    --border: #d7dfe3;
    --text: #182025;
    --text-secondary: #5f6b72;
    --accent: #448e96;
    --accent-hover: #36777e;
    --danger: #d70015;
    --success: #248a3d;
    --warning: #a35f00;
    --bg-main: #f3f5f6;
    --bg-card: #ffffff;
    --color-primary: #448e96;
    --brand-icon-color: var(--zephyr-icon-title);
    --protocol-badge-bg: rgba(68,142,150,.10);
    --protocol-badge-fg: #2d6268;
    --accent-soft-bg: rgba(68,142,150,.08);
    --accent-soft-border: rgba(68,142,150,.20);
    --accent-glow: rgba(68,142,150,.12);
    --wterm-selection: rgba(68,142,150,.20);
}
:root[data-color-scheme="custom"] {
    --bg: var(--bg-main);
    --surface: var(--bg-card);
    --accent: var(--color-primary);
    --accent-hover: var(--color-primary-hover, var(--color-primary));
    --brand-icon-color: var(--zephyr-icon-title, var(--color-primary));
}
:root[data-color-scheme="lava"] .app-shell,
:root[data-color-scheme="cyber"] .app-shell,
:root[data-color-scheme="asagi"] .app-shell,
:root[data-color-scheme="lava"] .terminal-page,
:root[data-color-scheme="cyber"] .terminal-page,
:root[data-color-scheme="asagi"] .terminal-page {
    background: var(--bg);
}
.nav-tab.active, .settings-tab.active,
.btn-sm.active {
    background: var(--accent-soft-bg);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.connection-card:hover { border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); }
:root[data-color-scheme="cyber"] .connection-card,
:root[data-color-scheme="cyber"] .settings-content,
:root[data-color-scheme="cyber"] .settings-menu,
:root[data-color-scheme="cyber"] .activity-panel { border-color: var(--border); box-shadow: var(--shadow-soft); }
:root[data-color-scheme="lava"] .btn-primary,
:root[data-color-scheme="cyber"] .btn-primary,
:root[data-color-scheme="asagi"] .btn-primary { box-shadow: none; }
:root[data-theme="dark"][data-color-scheme="cyber"] .btn-primary { color: #ffffff; }
:root[data-color-scheme="asagi"] .btn-primary { background: var(--accent); }
:root[data-color-scheme="asagi"] .tag-row span { background: var(--protocol-badge-bg); color: var(--protocol-badge-fg); }
:root[data-color-scheme="lava"] .search-input,
:root[data-color-scheme="lava"] .action-bar select,
:root[data-color-scheme="lava"] .settings-form input,
:root[data-color-scheme="lava"] .settings-form select,
:root[data-color-scheme="lava"] .settings-form textarea { background: color-mix(in srgb, var(--surface) 94%, var(--bg)); }


/* macOS restraint pass: neutral surfaces, consistent radii, quiet micro-interactions. */
html { scroll-behavior: smooth; }
body { font-weight: 400; }
button,
select,
input,
textarea,
[role="button"] { font-family: var(--font-sans); }
.nav-actions,
.card-actions,
.modal-actions,
.rdp-panel-actions,
.ai-header-actions,
.ai-plan-actions,
.ai-step-actions,
.color-panel-actions,
.brand-upload-row,
.fm-toolbar,
.topbar-actions,
.toolbar-row { gap: var(--control-gap); }
.connection-card,
.activity-panel,
.empty-card,
.settings-content,
.settings-menu,
.login-card,
.remote-servers,
.remote-command,
.result-card,
.ai-empty-card,
.ai-agent-panel.file-manager,
.file-manager,
.docker-panel,
.info-modal,
.snippet-panel,
.shortcut-panel,
.rdp-floating-panel,
.novnc-page .novnc-panel.rdp-floating-panel,
.connection-modal { box-shadow: var(--shadow-soft); }
.search-input,
.action-bar select,
.settings-form input,
.settings-form select,
.settings-form textarea,
.form-group input,
.form-group textarea,
.form-group select,
.remote-command input,
.remote-command textarea,
.cmd-input,
.rdp-panel-textarea,
.snippet-search,
.ai-provider-modal input,
.ai-provider-modal select,
.ai-provider-modal textarea,
.color-hex-input {
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
    font-weight: 400;
}
.search-input:hover,
.action-bar select:hover,
.settings-form input:hover,
.settings-form select:hover,
.settings-form textarea:hover,
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover,
.remote-command input:hover,
.remote-command textarea:hover,
.cmd-input:hover,
.rdp-panel-textarea:hover,
.snippet-search:hover,
.ai-provider-modal input:hover,
.ai-provider-modal select:hover,
.ai-provider-modal textarea:hover,
.color-hex-input:hover {
    border-color: color-mix(in srgb, var(--text-secondary) 24%, var(--border));
}
:root[data-theme="light"] .search-input,
:root[data-theme="light"] .action-bar select,
:root[data-theme="light"] .settings-form input,
:root[data-theme="light"] .settings-form select,
:root[data-theme="light"] .settings-form textarea,
:root[data-theme="light"] .form-group input,
:root[data-theme="light"] .form-group textarea,
:root[data-theme="light"] .form-group select,
:root[data-theme="light"] .remote-command input,
:root[data-theme="light"] .remote-command textarea,
:root[data-theme="light"] .cmd-input,
:root[data-theme="light"] .rdp-panel-textarea,
:root[data-theme="light"] .snippet-search,
:root[data-theme="light"] .ai-provider-modal input,
:root[data-theme="light"] .ai-provider-modal select,
:root[data-theme="light"] .ai-provider-modal textarea,
:root[data-theme="light"] .color-hex-input { background: #fff; }
.btn-sm,
.tool-btn,
.icon-btn,
.ui-btn,
.ui-select,
.link-btn,
.ai-tool-btn,
.ai-send-btn,
.ai-chat-delete,
.new-chat-btn,
.color-panel-actions button,
.mini-item button,
.rdp-shortcut-grid .tool-btn,
.shortcut-grid .tool-btn,
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon] {
    font-weight: 500;
}
.icon-btn,
.ai-tool-btn,
.ai-send-btn,
.theme-btn-login,
.mobile-fullscreen-dock-toggle,
.smartbar-picker-head button { border-radius: var(--radius-control); }
.icon-btn:hover,
.ui-btn:hover,
.color-panel-actions button:hover,
.mini-item button:hover,
.new-chat-btn:hover,
.ai-chat-delete:hover {
    transform: translate3d(0, -1px, 0) scale(1.01);
    background: color-mix(in srgb, var(--text) 5%, transparent);
}
.btn-sm:active,
.tool-btn:active,
.icon-btn:active,
.ui-btn:active,
.color-panel-actions button:active,
.mini-item button:active { transform: scale(.985); }
.protocol-badge,
.tag-row span,
.ai-capability-strip span,
.ai-status {
    border-radius: var(--radius-control);
    font-weight: 500;
    letter-spacing: 0;
}
.eyebrow,
.novnc-eyebrow,
.rdp-panel-label {
    letter-spacing: .08em;
    font-weight: 600;
}
.status-dot,
.proto-dot,
.ai-chat-running-dot { box-shadow: none !important; }
@media (prefers-reduced-motion: no-preference) {
    .btn,
    .btn-sm,
    .tool-btn,
    .icon-btn,
    .ui-btn,
    .connection-card,
    .ai-chat-row,
    .snippet-item,
    .server-check,
    .nav-tab,
    .settings-tab {
        will-change: transform, box-shadow;
    }
}

.zephyr-brand-mark {
    width: 1.08em;
    height: 1.08em;
    color: var(--brand-icon-color, var(--accent-hover));
    display: inline-grid;
    place-items: center;
    filter: drop-shadow(0 8px 18px var(--zephyr-icon-glow, transparent)); opacity: .96;
}
.zephyr-brand-mark .zephyr-brand-svg { width: 1.08em; height: 1.08em; overflow: visible; }
.zephyr-brand-mark .wind-path-main,
.zephyr-brand-mark .wind-path-mid,
.zephyr-brand-mark .wind-path-tail { stroke-linecap: round; stroke-linejoin: round; fill: none; }
.zephyr-brand-mark .wind-path-main { stroke-width: 10; }
.zephyr-brand-mark .wind-path-mid { stroke-width: 6; opacity: .85; }
.zephyr-brand-mark .wind-path-tail { stroke-width: 3.5; opacity: .6; }
.login-card .logo .zephyr-brand-mark { font-size: 72px; margin: -8px 0 -4px; }
.brand .zephyr-brand-mark { font-size: 24px; }
.brand-icon-preview .zephyr-brand-mark { font-size: 52px; min-width: 0; }
.theme-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.theme-choice-grid label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text-secondary); font-size: 13px; }
.theme-choice-grid input { width: auto; }
.custom-theme-panel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 82%, var(--bg));
}
.custom-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}
.custom-color-grid label {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 12px;
}
/* color inputs are custom hex + swatch controls, not native browser color inputs. */
.terminal-bg-preview {
    min-height: 74px;
    display: grid;
    place-items: center;
    border: 1px dashed color-mix(in srgb, var(--accent) 48%, var(--border));
    border-radius: 14px;
    background-color: var(--bg);
    background-size: cover;
    background-position: center;
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
}

:root[data-wterm-theme="custom"] {
    --wterm-bg: #0a0a0a;
    --wterm-fg: var(--wterm-custom-fg, #f4f4f6);
}
:root[data-wterm-theme="custom"] .terminal-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--wterm-custom-bg-image);
    background-size: var(--wterm-custom-bg-size, cover);
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--wterm-custom-bg-opacity, .35);
    filter: saturate(1.04);
}
:root[data-wterm-theme="custom"] .terminal-container::after { z-index: 1; }
:root[data-wterm-theme="custom"] .terminal-container .wterm-wrapper,
:root[data-wterm-theme="custom"] .terminal-container .wterm-wrapper.wterm {
    position: relative;
    z-index: 2;
    background: color-mix(in srgb, var(--wterm-bg) 68%, transparent) !important;
    color: var(--wterm-custom-fg, var(--wterm-fg)) !important;
}
:root[data-wterm-theme="custom"][data-wterm-font-custom="1"] .terminal-container .wterm-wrapper .term-grid { color: var(--wterm-custom-fg, var(--wterm-fg)); }

.zephyr-color-picker {
    --picker-color: #0a84ff;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.zephyr-color-picker .color-swatch {
    width: 42px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.28), rgba(0,0,0,.12)),
        var(--picker-color);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px var(--accent-glow, rgba(0,0,0,.12));
    cursor: pointer;
}
.zephyr-color-picker.disabled { opacity: .55; }
.zephyr-color-picker.disabled .color-swatch { cursor: not-allowed; }
.color-hex-input {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    text-transform: lowercase;
}
.zephyr-color-panel {
    --panel-hue: 210;
    --panel-color: #0a84ff;
    --panel-sv-x: 100%;
    --panel-sv-y: 0%;
    position: fixed;
    z-index: 10000;
    width: min(288px, calc(100vw - 20px));
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
    display: grid;
    gap: 10px;
    user-select: none;
}
.zephyr-color-panel.hidden { display: none; }
.color-panel-current {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
}
.color-panel-current-swatch {
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.24), rgba(0,0,0,.10)),
        var(--panel-color);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}
.color-palette-sv {
    position: relative;
    height: 158px;
    border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(0deg, #000, transparent),
        linear-gradient(90deg, #fff, hsl(var(--panel-hue) 100% 50%));
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.color-palette-cursor {
    position: absolute;
    left: var(--panel-sv-x);
    top: var(--panel-sv-y);
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.32);
    pointer-events: none;
}
.color-hue-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-secondary);
    font-size: 12px;
}
.color-hue-row input[type="range"] {
    width: 100%;
    accent-color: hsl(var(--panel-hue) 100% 50%);
}
.color-panel-hint {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
}
.color-panel-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 7px;
}
.color-panel-grid button {
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 9px;
    background: var(--preset-color);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.color-panel-actions { display: flex; justify-content: flex-end; margin-top: 0; }
.color-panel-actions button {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text-secondary);
    padding: 5px 10px;
    cursor: pointer;
}



/* De-AI legacy glow cleanup for dock, editor and utility chrome. */
.smartbar-add-icon,
.smartbar-session-icon,
.terminal-window,
.fm-editor-modal,
.fm-editor-code-shell,
.toast,
.disk-card,
.terminal-window-more,
.mobile-fullscreen-dock-toggle,
.smartbar-trash-target {
    box-shadow: var(--shadow-soft) !important;
}
.smartbar-add:hover .smartbar-add-icon,
.smartbar-session.active .smartbar-session-icon,
.terminal-window.active,
.terminal-window.dock-drop-target,
.server-check:has(input:checked),
.snippet-item:hover,
.novnc-icon-btn.active,
.btn-sm.active,
.tool-btn:active,
.modifier.active {
    border-color: var(--accent-soft-border) !important;
    background: var(--accent-soft-bg) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}
.smartbar-session.active::after,
.proto-dot.rdp,
.proto-dot.vnc,
.status-dot,
.ai-chat-running-dot {
    box-shadow: none !important;
}
.terminal-window.dock-drop-target::after {
    border-color: var(--accent-soft-border);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    color: var(--text);
    animation: none;
}
.remote-command input:focus,
.remote-command textarea:focus,
.snippet-search:focus,
.novnc-panel textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
    box-shadow: var(--focus-ring) !important;
}
.panel-layout-icon.full,
.panel-layout-icon.left::after,
.panel-layout-icon.right::after,
.panel-layout-icon.top::after,
.panel-layout-icon.bottom::after { background: var(--accent-soft-bg) !important; }
.toast.info,
.toast.success,
.toast.error { box-shadow: var(--shadow-lift) !important; }

.novnc-page {
    background: var(--bg);
}
.novnc-page::before { opacity: .18; }
.novnc-topbar {
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(16px) saturate(1.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
}
.novnc-orb {
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    box-shadow: inset 0 0 0 1px var(--accent-soft-border);
}
.novnc-orb span { border-color: var(--accent); box-shadow: none; }
.novnc-status-card,
.novnc-tool,
.novnc-icon-btn,
.novnc-primary,
.novnc-secondary,
.novnc-panel-close,
.novnc-shortcut-grid button {
    border-color: var(--border);
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-control);
    transition: transform .46s var(--ease-micro), background .32s var(--ease-smooth), border-color .32s var(--ease-smooth), box-shadow .46s var(--ease-micro), color .28s ease;
}
.novnc-tool:hover,
.novnc-icon-btn:hover,
.novnc-secondary:hover,
.novnc-shortcut-grid button:hover {
    transform: translate3d(0, -1px, 0) scale(1.01);
    border-color: color-mix(in srgb, var(--text-secondary) 26%, var(--border));
    background: color-mix(in srgb, var(--text) 5%, transparent);
}
.novnc-primary {
    border-color: transparent;
    background: var(--accent) !important;
    color: #fff;
}
.novnc-stage,
.novnc-screen { box-shadow: var(--shadow-soft); }
.novnc-screen-shell,
.novnc-screen-bg { background-color: var(--bg); }
.novnc-overlay { background: color-mix(in srgb, var(--bg) 86%, transparent); }

/* Remote desktop and AI surfaces: remove decorative glow, keep hierarchy through quiet edges. */
.rdp-stage,
.novnc-page .novnc-stage.rdp-stage {
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 66%, transparent);
}
.rdp-display-shell,
.novnc-page .novnc-screen-shell.rdp-display-shell {
    background:
        linear-gradient(45deg, color-mix(in srgb, var(--text) 2.5%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--text) 2.5%, transparent) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--text) 2.5%, transparent) 75%),
        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--text) 2.5%, transparent) 75%),
        var(--bg);
}
.rdp-floating-panel,
.novnc-page .novnc-panel.rdp-floating-panel,
.snippet-panel,
.shortcut-panel {
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.rdp-floating-panel.front,
.novnc-page .novnc-panel.rdp-floating-panel.front { box-shadow: 0 20px 48px -26px rgba(0,0,0,.46); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon]::before,
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon]::before {
    background: currentColor;
    opacity: .82;
}
.rdp-page .topbar-actions .btn-sm[data-rdp-icon],
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon] { color: var(--text-secondary); }
.rdp-page .topbar-actions .btn-sm[data-rdp-icon]:hover,
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon]:hover,
.rdp-page .topbar-actions .btn-sm[data-rdp-icon].active,
.novnc-page .novnc-toolbar .btn-sm[data-vnc-icon].active { color: var(--text); }
.ai-floating-btn,
.nav-actions .ai-floating-btn,
.nav-actions .ai-floating-btn.active,
.nav-actions .ai-floating-btn:not(.active) {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.nav-actions .ai-floating-btn:hover,
.nav-actions .ai-floating-btn.active:hover {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--text) 5%, transparent) !important;
    border-color: transparent !important;
    transform: translate3d(0, -1px, 0) scale(1.012);
}
.ai-agent-panel.file-manager {
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    box-shadow: 0 20px 56px -30px rgba(0,0,0,.56);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.ai-agent-sidebar,
.ai-title-bar,
.ai-input-area { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ai-chat-row.active,
.ai-chat-item.active,
.ai-message.user {
    color: #fff;
    background: var(--accent);
    box-shadow: none;
}
.ai-chat-row:hover,
.ai-chat-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.ai-capability-strip span,
.ai-status-running,
.ai-status-retrying { color: var(--accent-hover); background: var(--accent-soft-bg); border-color: var(--accent-soft-border); }
.ai-message {
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px -22px rgba(0,0,0,.22);
}
.ai-message.ai,
.ai-message.assistant,
.ai-message.system,
.ai-typing-indicator { background: color-mix(in srgb, var(--surface) 82%, var(--bg)); }
.ai-message.ai,
.ai-message.assistant { border-bottom-left-radius: var(--radius-control); }
.ai-message.user { border-bottom-right-radius: var(--radius-control); }
.ai-agent-panel .ai-input-area {
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px -22px rgba(0,0,0,.22);
    backdrop-filter: blur(14px) saturate(1.02);
    -webkit-backdrop-filter: blur(14px) saturate(1.02);
}
.ai-agent-panel .ai-input-area:focus-within { box-shadow: 0 10px 30px -22px rgba(0,0,0,.22), var(--focus-ring); }
.ai-agent-panel .ai-send-btn {
    border-radius: var(--radius-control) !important;
    box-shadow: none !important;
}
.ai-agent-panel .ai-send-btn:hover { box-shadow: none !important; transform: translate3d(0, -1px, 0) scale(1.02); }
.ai-agent-panel .ai-tool-btn { border-radius: var(--radius-control) !important; }
.zephyr-color-picker .color-swatch,
.color-panel-grid button {
    border-radius: var(--radius-control);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.zephyr-color-panel {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
}
.smartbar-panel,
.smartbar-picker,
.terminal-window-menu {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lift) !important;
}

/* ===== Robust mobile terminal fixes: Dock tap target + anchored bottom bars ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact.custom-fullscreen {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
        overflow: hidden !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window-titlebar {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        padding-right: 50px !important;
        overflow: visible !important;
        touch-action: manipulation !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-frame {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .mobile-fullscreen-dock-toggle {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: grid !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        width: 32px !important;
        height: 32px !important;
        z-index: 120 !important;
        place-items: center !important;
        border-radius: 999px !important;
        transform: translateY(-50%) !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle:active,
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle.is-pressing {
        transform: translateY(-50%) scale(.94) !important;
    }

    body.terminal-custom-fullscreen-open .terminal-smartbar {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 40px) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        left: auto !important;
        bottom: auto !important;
        width: 92px !important;
        height: auto !important;
        transform: none !important;
        z-index: 1008 !important;
        pointer-events: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        pointer-events: auto !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        width: 92px !important;
        max-width: 92px !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 52px) !important;
        overflow: hidden !important;
        transform-origin: calc(100% - 25px) -18px !important;
        transform: translate3d(18px, -18px, 0) scale3d(.22, .10, 1) !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.closing .smartbar-panel {
        transform: translate3d(18px, -18px, 0) scale3d(.22, .10, 1) !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open ~ .terminal-workspace .terminal-frame {
        pointer-events: none !important;
    }

    html.mobile-stable-input,
    body.mobile-stable-input {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    html.mobile-stable-input .terminal-page {
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        grid-template-areas:
            "mobile-input"
            "mobile-terminal"
            "mobile-actions"
            "mobile-aux" !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        padding: 0 !important;
    }
    html.mobile-stable-input .terminal-topbar {
        display: contents !important;
    }
    html.mobile-stable-input .terminal-topbar > .status,
    html.mobile-stable-input .terminal-topbar > .info {
        display: none !important;
    }
    html.mobile-stable-input .terminal-top-input {
        grid-area: mobile-input !important;
        display: block !important;
        min-height: 0 !important;
        padding: 6px 8px !important;
        z-index: 4 !important;
    }
    html.mobile-stable-input .cmd-input-row { gap: 10px !important; }
    html.mobile-stable-input .cmd-input { min-width: 0 !important; resize: none !important; }
    html.mobile-stable-input .cmd-send-btn { flex: 0 0 auto !important; min-width: 58px !important; }
    html.mobile-stable-input .terminal-container {
        grid-area: mobile-terminal !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 6px !important;
        overflow: hidden !important;
        contain: layout paint !important;
    }
    html.mobile-stable-input .terminal-container .wterm-wrapper,
    html.mobile-stable-input .terminal-container .wterm-wrapper.wterm {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    html.mobile-stable-input .topbar-actions {
        grid-area: mobile-actions !important;
        position: static !important;
        display: flex !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        transform: none !important;
        z-index: 5 !important;
        background: var(--surface) !important;
    }
    html.mobile-stable-input .terminal-bottom-bar {
        grid-area: mobile-aux !important;
        position: static !important;
        display: block !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
        transform: none !important;
        z-index: 5 !important;
        background: var(--surface) !important;
    }
    html.mobile-stable-input .mobile-aux-keys {
        display: flex !important;
        min-height: 44px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
}

/* ===== Terminal shelf/smartbar final lock: the white line is carved into the nav extension ===== */
body.terminal-mode-entering .main-nav { animation: none !important; }
body.terminal-mode .main-nav {
    transition:
        padding-bottom var(--terminal-shelf-duration) var(--terminal-shelf-ease),
        background .30s ease,
        box-shadow .42s ease,
        border-radius .42s ease !important;
}
body.terminal-mode .main-nav::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(var(--terminal-shelf-line-center-offset) - var(--terminal-shelf-line-height) / 2);
    width: var(--smartbar-bar-width, 72px);
    height: var(--smartbar-bar-height, 4px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 58%, transparent);
    box-shadow: 0 1px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.32);
    pointer-events: none;
    transform: translate3d(-50%, calc(-1 * var(--terminal-shelf-line-travel)), 0);
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 999px);
    transition:
        transform var(--terminal-shelf-duration) var(--terminal-shelf-ease),
        opacity var(--terminal-shelf-duration) linear,
        clip-path var(--terminal-shelf-duration) var(--terminal-shelf-ease);
}
body.terminal-mode .main-nav.terminal-shelf-settled::after {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 999px);
    transform: translate3d(-50%, 0, 0);
}
body.terminal-mode .main-nav.terminal-shelf-dock-open::after {
    opacity: 0 !important;
    clip-path: inset(0 0 100% 0 round 999px) !important;
    transform: translate3d(-50%, 0, 0) !important;
    transition: none !important;
}
.terminal-smartbar {
    top: calc(var(--smartbar-top) - var(--smartbar-shelf-offset)) !important;
    left: 50% !important;
    right: auto !important;
    width: 0 !important;
    height: 0 !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    transition: top var(--terminal-shelf-duration) var(--terminal-shelf-ease) !important;
}
/* settled state keeps the same top as the moving handle; nav ::after supplies the visible line */
.smartbar-handle {
    top: 0 !important;
    width: 118px !important;
    height: var(--smartbar-handle-height) !important;
    opacity: 0 !important;
    clip-path: inset(0 0 100% 0 round 999px) !important;
    transform: translate3d(-50%, calc(-1 * var(--terminal-shelf-line-travel)), 0) scaleX(.96) !important;
    transition:
        transform var(--terminal-shelf-duration) var(--terminal-shelf-ease),
        opacity var(--terminal-shelf-duration) linear,
        clip-path var(--terminal-shelf-duration) var(--terminal-shelf-ease) !important;
}
.smartbar-handle span {
    width: var(--smartbar-bar-width, 72px) !important;
    height: var(--smartbar-bar-height, 4px) !important;
    background: color-mix(in srgb, var(--text-secondary) 58%, transparent) !important;
    transition: width .30s ease, background .22s ease, transform .30s ease !important;
}
body.terminal-mode .terminal-smartbar .smartbar-handle,
body.terminal-mode-entering .terminal-smartbar .smartbar-handle,
.terminal-smartbar.open .smartbar-handle,
.terminal-smartbar.closing .smartbar-handle {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0 round 999px) !important;
    transform: translate3d(-50%, 0, 0) scaleX(1) !important;
    animation: none !important;
}
body.terminal-mode .main-nav:not(.terminal-shelf-settled)::after {
    opacity: 0 !important;
    pointer-events: none !important;
}
body.terminal-mode .main-nav.terminal-shelf-settled ~ .app-main .terminal-smartbar:not(.open):not(.closing) .smartbar-handle {
    opacity: 0 !important;
    clip-path: inset(0 0 0 0 round 999px) !important;
    transform: translate3d(-50%, 0, 0) scaleX(1) !important;
    pointer-events: auto !important;
    transition: none !important;
}
.terminal-smartbar.open .smartbar-handle,
.terminal-smartbar.closing .smartbar-handle {
    pointer-events: auto !important;
}
body:not(.terminal-mode) .main-nav::after,
body:not(.terminal-mode) .terminal-smartbar:not(.open):not(.closing) .smartbar-handle,
body.terminal-mode .main-nav:not(.terminal-shelf-settled) ~ .app-main .terminal-smartbar:not(.open):not(.closing) .smartbar-handle {
    opacity: 0 !important;
    clip-path: inset(0 0 100% 0 round 999px) !important;
    transform: translate3d(-50%, calc(-1 * var(--terminal-shelf-line-travel)), 0) scaleX(.96) !important;
    pointer-events: none !important;
}
.terminal-smartbar.open .smartbar-handle,
.terminal-smartbar.closing .smartbar-handle {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.terminal-smartbar.open .smartbar-handle span {
    width: 66px !important;
    background: color-mix(in srgb, var(--accent-hover) 62%, var(--text-secondary)) !important;
}
.terminal-smartbar .smartbar-panel { top: var(--smartbar-panel-drop) !important; }
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    :root {
        --terminal-shelf-line-travel: 24px;
        --terminal-shelf-rest-padding: 12px;
        --terminal-shelf-open-padding: 27px;
        --terminal-shelf-line-height: 4px;
        --smartbar-handle-height: 18px;
        --smartbar-panel-drop: 36px;
    }
    .smartbar-handle { height: var(--smartbar-handle-height) !important; }
    .smartbar-handle span { width: 74px !important; }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: calc(var(--smartbar-top) - var(--smartbar-shelf-offset)) !important;
        left: 50% !important;
        right: auto !important;
        width: 0 !important;
        transform: translateX(-50%) !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        top: var(--smartbar-panel-drop) !important;
        left: 50% !important;
        right: auto !important;
        width: min(max-content, calc(100vw - 36px)) !important;
        max-width: min(760px, calc(100vw - 36px)) !important;
        transform-origin: top center !important;
    }
}

/* Final mobile fullscreen Dock placement: keep normal terminal Dock centered; only move the opened fullscreen Dock to the right edge. */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .terminal-smartbar.open,
    body.terminal-custom-fullscreen-open .terminal-smartbar.closing {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 40px) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        left: auto !important;
        bottom: auto !important;
        width: 92px !important;
        height: auto !important;
        transform: none !important;
        z-index: 1008 !important;
        pointer-events: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-handle,
    body.terminal-custom-fullscreen-open .terminal-smartbar.closing .smartbar-handle {
        display: none !important;
        pointer-events: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel,
    body.terminal-custom-fullscreen-open .terminal-smartbar.closing .smartbar-panel {
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 92px !important;
        max-width: 92px !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 52px) !important;
        overflow: hidden !important;
        transform-origin: calc(100% - 25px) -18px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.closing .smartbar-panel {
        transform: translate3d(18px, -18px, 0) scale3d(.22, .10, 1) !important;
    }
}