/* ErisPulse Dashboard – layout (auto-split from dash.css, aligned with js/) */
/* 悬浮壳：页面四周与区块之间露出 var(--gap-shell) 的 --bg-p 底色 */
.app.authed {
    padding: var(--gap-shell);
    gap: var(--gap-shell);
}

/* 任务面板锚点从旧全幅 header 顶边换到悬浮 header 卡片之下 */
.app .task-panel {
    top: calc(var(--gap-shell) + 64px + 6px);
    right: var(--gap-shell);
}

/* 悬浮壳：header 为独立圆角卡片，浮在 --bg-p 底色上（间隙由 .app 的 gap 提供） */
.header {
    background: var(--bg-t);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--bd);
    border-radius: var(--radius-panel);
    flex-shrink: 0;
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header h1 {
    font-size: 16px;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ws-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--bg-t);
    color: var(--tx-s);
    border: 1px solid var(--bd);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ws-badge.on {
    background: var(--ok-bg);
    color: var(--ok-c);
    border-color: var(--ok-bd);
}

.ws-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tx-t);
}

.ws-badge.on .dot {
    background: var(--ok-c);
}

.conn-badge-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.conn-badge {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--bd);
    background: var(--bg-t);
    gap: 4px;
    cursor: default;
    transition: border-color 0.3s;
}

.conn-badge.connected {
    border-color: var(--ok-bd);
    background: var(--ok-bg);
}

.conn-badge.disconnected {
    border-color: var(--er-bd);
    background: var(--er-bg);
}

.conn-badge .status-icon-frames {
    width: 20px;
    height: 20px;
}

.conn-badge .status-icon-container {
    
    
    display: none;
}

.conn-badge-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--tx-s);
    white-space: nowrap;
}

.conn-badge.connected .conn-badge-text {
    color: var(--ok-c);
}

.conn-badge.disconnected .conn-badge-text {
    color: var(--er-c);
}

.conn-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-t);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 14px;
    transform-origin: top right;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.25s;
    z-index: 100;
    white-space: nowrap;
}

.conn-panel.expanded {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.conn-panel .status-icon-frames {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.conn-panel .status-icon-container {
    gap: 0;
}

.conn-panel-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.conn-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tx-p);
}

.conn-panel-desc {
    font-size: 12px;
    color: var(--tx-s);
}

/* ── WS 连接详情面板 ── */
.conn-badge {
    cursor: pointer;
    user-select: none;
}
.ws-inspector {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(420px, calc(100vw - 24px));
    max-height: min(560px, calc(100vh - 80px));
    background: var(--bg-t);
    border: 1px solid var(--bd);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition:
        transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1),
        opacity 0.18s;
    z-index: 1300;
    overflow: hidden;
}
.ws-inspector.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.ws-insp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bd);
    flex-shrink: 0;
}
.ws-insp-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx-p);
}
.ws-insp-info {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ws-insp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--tx-s);
    min-width: 0;
    max-width: 100%;
}
.ws-insp-row > span:first-child {
    flex-shrink: 0;
}
.ws-insp-val {
    color: var(--tx-p);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
code.ws-insp-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    cursor: help;
}
/* 移动/平板（≤1023px，抽屉模式）：WS 面板固定定位铺满宽度，避免被 header 容器裁剪/溢出 */
@media (max-width: 1023px) {
    .ws-inspector {
        position: fixed;
        top: 58px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 74px);
        max-height: calc(100dvh - 74px);
    }
}

.btn-icon {
    width: 36px;
    height: 36px;
    border: 1px solid var(--bd);
    background: var(--bg-t);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tx-s);
    flex-shrink: 0;
}

.btn-icon:hover {
}

.btn-icon:hover svg {
    color: var(--accent);
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    transition: color 0.15s ease;
}

.btn-icon.active {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: #fff;
}

.lang-btn {
    padding: 4px 12px;
    border: 1px solid var(--bd);
    background: var(--bg-t);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--tx-s);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lang-btn:hover {
    color: var(--accent);
}

.btn-hamburger {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bd);
    background: var(--bg-t);
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--tx-p);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.btn-hamburger:hover {
    color: var(--accent);
}

.btn-hamburger svg {
    width: 20px;
    height: 20px;
}

.main {
    display: flex;
    flex: 1;
    gap: var(--gap-shell);
    overflow: hidden;
    min-height: 0;
}

/* 悬浮圆角面板：与卡片同 surface 语言（--bg-t 浮在 --bg-p 上），独立滚动由 .sidebar-nav 承担 */
.sidebar {
    width: 232px;
    background: var(--bg-t);
    border: 1px solid var(--bd);
    border-radius: var(--radius-panel);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 节点下拉（折叠态左探出）与折叠态 tooltip 需要溢出可见 */
    overflow: visible;
}

.sidebar.compact {
    width: 196px;
}
.sidebar.compact .nav-item {
    padding: 5px 8px;
    font-size: 12px;
    gap: 8px;
}
.sidebar.compact .nav-ico {
    width: 26px;
    height: 26px;
}
.sidebar.compact .nav-ico svg {
    width: 14px;
    height: 14px;
}
.sidebar.compact .nav-group-title {
    padding: 10px 8px 4px 12px;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 6px;
}

.nav-group-title {
    padding: 16px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tx-s);
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition:
        color 0.2s ease,
        background 0.2s ease;
    border-radius: var(--radius-md);
    margin: 0 4px;
    padding: 8px 10px 8px 12px;
    position: relative;
}

.nav-group-title::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.5;
}

.nav-group.collapsed .nav-group-title::after {
    transform: rotate(-45deg);
}

.nav-group-title:hover {
    color: var(--tx-p);
    background: var(--bg-s);
}

.nav-group-title:hover::after {
    opacity: 0.8;
}

.nav-group:first-child .nav-group-title {
    padding-top: 8px;
}

.nav-group .nav-item {
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.nav-group.collapsed .nav-item {
    display: none;
}

.nav-group.collapsed > .nav-group-title {
    opacity: 0.5;
}

.nav-group.collapsed > .nav-group-title::before {
    opacity: 0.25;
}

.nav-group + .nav-group {
    margin-top: 4px;
    padding-top: 12px;
    position: relative;
}

.nav-group + .nav-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: var(--bd);
}

.nav-group + .nav-group .nav-group-title {
    border-top: none;
    margin-top: 0;
    padding-top: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin: 0 4px 2px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
    color: var(--tx-s);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    position: relative;
}

/* 圆形图标卡：状态标识集中在 ico 上，item 本体不吃药丸底 */
.nav-ico {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-s);
    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.nav-ico svg {
    width: 15px;
    height: 15px;
    opacity: 0.75;
    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}

.nav-item:hover {
    color: var(--tx-p);
}

.nav-item:hover .nav-ico {
    background: var(--accent-soft);
}

.nav-item:hover .nav-ico svg {
    opacity: 1;
}

.nav-item.active {
    color: var(--accent);
    font-weight: 600;
}

.nav-item.active .nav-ico {
    background: var(--accent-soft);
}

.nav-item.active .nav-ico svg {
    color: var(--accent);
    opacity: 1;
}

/* 文字标签样式（.nav-ico 是图标卡容器，须排除） */
.nav-item > span:not(.nav-ico) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-badge {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-t);
    color: var(--tx-t);
    border: 1px solid var(--bd);
    flex-shrink: 0;
    line-height: 1.4;
}

.sidebar.collapsed {
    width: 66px;
}

.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .nav-item > span:not(.nav-ico),
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .fw-ver {
    opacity: 0;
    width: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    border: none;
}

.nav-group-title,
.nav-item > span:not(.nav-ico),
.nav-badge,
.fw-ver {
    transition:
        opacity 0.2s ease,
        max-height 0.2s ease,
        margin 0.2s ease,
        padding 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .nav-group {
    margin-top: 0;
}

.sidebar.collapsed .nav-group + .nav-group {
    border-top: none;
    margin-top: 10px;
    padding-top: 0;
}

/* 折叠态隐藏组分隔线：光杆图标间只保留留白 */
.sidebar.collapsed .nav-group + .nav-group::before {
    display: none;
}

.nav-group + .nav-group {
    transition:
        border-color 0.2s ease,
        margin-top 0.2s ease,
        padding-top 0.2s ease;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 8px 4px;
    margin: 0 2px 4px;
    gap: 0;
}

/* 折叠态 = 悬浮圆形图标列：激活/悬停状态沿用展开态的 .nav-ico 规则（ico 着色），item 本体无底色 */

.sidebar.collapsed .nav-ico svg {
    opacity: 0.9;
    margin: 0;
}

.sidebar.collapsed .nav-item > span:not(.nav-ico) {
    display: none;
}

/* 气泡 tooltip 需要探出面板右缘：折叠态默认放开滚动裁剪。
   内容超出视口时由 main.js 挂 is-scrollable 切回内部滚动——
   footer 始终吸底（展开按钮永不因高度不足丢失），代价仅是该极端场景下气泡被裁 */
.sidebar.collapsed .sidebar-nav {
    overflow: visible;
}

.sidebar.collapsed .sidebar-nav.is-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
}

/* 折叠态 hover 气泡：文案来自 data-tip（main.js 在 i18n 后同步） */
.sidebar.collapsed .nav-item::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 5px 10px;
    background: var(--bg-t);
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--tx-p);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.sidebar.collapsed .nav-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: 8px 0;
}

.sidebar.collapsed .sidebar-footer .fw-ver {
    display: none;
}

.sidebar.collapsed .node-selector {
    padding: 6px;
    display: flex;
    justify-content: center;
}

.sidebar.collapsed .node-selector-header {
    padding: 8px;
    /* 折叠态仅剩节点圆点：加边框使其读作可点按钮 */
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
}

.sidebar.collapsed .node-selector-current {
    gap: 0;
}

.sidebar.collapsed #nodeSelectorLabel,
.sidebar.collapsed .node-selector-arrow {
    display: none;
}

.sidebar.collapsed .node-dot {
    width: 12px;
    height: 12px;
}

.sidebar.collapsed .node-dropdown {
    left: 100%;
    right: auto;
    width: 220px;
    margin-left: 4px;
}

/* ── 节点选择器：统一到面板语言（surface 底上以次级底色做 hover，圆角/发丝线节奏与 nav 一致）── */
/* 用 .sidebar 前缀抬高优先级覆盖 cluster.css 的基础样式 */
.sidebar .node-selector {
    padding: 10px 10px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
}

.sidebar .node-selector-header {
    border-radius: var(--radius-md);
}

.sidebar .node-selector-header:hover {
    background: var(--bg-s);
}

.sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sidebar-footer .fw-ver {
    font-size: 11px;
    color: var(--tx-t);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.sidebar-collapse-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--tx-t);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    opacity: 0.5;
    transition:
        opacity 0.2s ease,
        background 0.2s ease;
}

.sidebar-collapse-btn:hover {
    opacity: 0.8;
    color: var(--accent);
}

.sidebar-collapse-btn svg {
    width: 15px;
    height: 15px;
    transition: transform 0.3s ease;
}

.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-collapse-btn {
    margin: 0 auto;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.page {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    position: relative;
}

.page.active {
    display: block;
}

/* 滚动条走 base.css 全局镂空样式 */

.page-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    color: var(--tx-p);
    line-height: 1.3;
}

.page.active .page-title {
    animation: bubbleIn 0.5s 0.08s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.page-desc {
    font-size: 14px;
    color: var(--tx-s);
    margin-top: -16px;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.page.active .page-desc {
    animation: bubbleIn 0.4s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.page-loader-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: 3px;
    background: var(--accent);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.page-loader-strip.hide {
    opacity: 0;
}

.page-loader-strip .pl-label {
    position: absolute;
    top: 8px;
    left: 50%;
    
    font-size: 11px;
    color: var(--tx-s);
    letter-spacing: 0.06em;
    white-space: nowrap;
    opacity: 0;
    animation: titleReveal 0.3s 0.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    transition: opacity 0.25s ease;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}


/* 关于页面 - 始终底部 */
.sidebar-about {
    padding: 4px 8px 0;
    border-top: 1px solid var(--bd);
    margin-top: auto;
}

/* ── 移动/平板 ≤1023px：回到全高抽屉 + 全宽 header（hamburger/overlay 机制见 overrides.css） ── */
@media (max-width: 1023px) {
    .app.authed {
        padding: 0;
        gap: 0;
    }

    /* header 全宽贴顶 */
    .header {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--bd);
    }

    .app .task-panel {
        /* header 实高 ~64px（12px 上下留白 + 40px 内容），58px 会被 header 压住 */
        top: 70px;
        right: 10px;
    }

    /* 侧栏 = 全高抽屉：直角贴边；dvh 避免 iOS 底部工具栏遮挡，底部留 safe-area */
    .sidebar {
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--bd);
        height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* 抽屉态恢复滚动与文字（overrides.css 已 revert 文字），tooltip 不适用 */
    .sidebar.collapsed .sidebar-nav {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebar.collapsed .nav-item::after {
        display: none;
    }

    /* WS 连接详情面板与 task-panel 同步避开 header 实高 */
    .ws-inspector {
        top: 70px;
    }
}

/* ── 手机 ≤768px：header 重排 + 触控目标放大 ── */
@media (max-width: 768px) {
    .header {
        padding: 10px 12px;
        gap: 8px;
    }

    /* 标题单行截断，不给换行撑高 header */
    .header-left {
        min-width: 0;
        flex: 1;
    }

    .header h1 {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-right {
        flex-shrink: 0;
        gap: 8px;
    }

    .conn-badge-text {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 触控目标 ≥40px */
    .btn-icon {
        width: 40px;
        height: 40px;
    }

    .btn-hamburger {
        width: 40px;
        height: 40px;
    }

    /* 抽屉导航：字号 14、整行 ≥44px */
    .sidebar .nav-item {
        font-size: 14px;
        padding: 10px 12px;
    }

    /* 抽屉选中后由 router 自动收起（已有机制），此处保证抽屉不超宽 */
    .sidebar,
    .sidebar.collapsed {
        max-width: 85vw;
    }
}