/**
 * ROS Web 响应式样式
 * 适配不同屏幕尺寸
 */

/* 对齐狗上 2D：常见显示器宽度下右栏 300px */
@media (max-width: 2000px) {
    :root {
        --control-panel-width: 300px;
    }

    .control-panel,
    .control-panel.app-right-rail {
        max-height: calc(100dvh - var(--topbar-height) - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================== 平板设备 (768px - 1024px) ==================== */
@media (max-width: 1024px) {
    /* 宽度由下方三栏 clamp 规则统一控制 */
    .c12-media-rail {
        max-height: none;
        height: 100%;
    }
    
    .display-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .option-btn {
        min-height: 52px;
        font-size: 12px;
        padding: 10px;
    }
    
    .speed-control {
        flex-direction: column;
        align-items: center;
    }
    
    .speed-info {
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
    }

    /* ========== 速度控制器左下角悬浮 (Velocity Control) ========== */
    /* 将速度盘从侧边栏中移除，固定在左下角，避免被其他菜单挤出屏幕 */
    #velocity-control-card:not(.c12-rail-joy-card) {
        position: fixed;
        left: var(--spacing-md);
        z-index: 95;
        width: auto;
        max-width: min(280px, 94vw);
        background: rgba(var(--bg-panel-rgb), 0.8) !important;
        backdrop-filter: blur(8px);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-lg);
        padding: 5px;
        margin: 0;
        box-shadow: var(--shadow-md);
        overflow: visible;
    }
    
    /* 隐藏卡片标题，节省空间，只显示仪表盘和方向盘 */
    #velocity-control-card .card-title {
        display: none;
    }
    
    /* 调整内部边距 */
    #velocity-control-card .speed-control {
        padding: 0;
    }

    /* ========== 机器狗控制栏方向自适应 (Orientation) ========== */
    
    /* 1. 竖屏模式 (Portrait): 手机或平板竖持 */
    /* 底部空间要求高，防止被遮挡；允许换行以适应窄宽度 */
    @media (orientation: portrait) {
        /* 控制栏位置 */
        .robot-control-bar {
            bottom: calc(var(--spacing-md) + 100px + env(safe-area-inset-bottom)) !important;
            flex-wrap: wrap;
            width: 90%;
            padding: 4px;
            gap: 2px;
        }

        /* 速度盘位置：必须高于控制栏 */
        /* 控制栏大约高 80px (两行按钮) + 100px 底部 = 180px */
        #velocity-control-card:not(.c12-rail-joy-card) {
             bottom: calc(var(--spacing-md) + 180px + env(safe-area-inset-bottom));
             transform: scale(0.85);
             transform-origin: bottom left;
        }
    }

    /* 2. 横屏模式 (Landscape): 手机或平板横持 */
    @media (orientation: landscape) {
        .robot-control-bar {
            bottom: calc(var(--spacing-lg) + 60px + env(safe-area-inset-bottom)) !important;
            flex-wrap: nowrap;
            width: auto;
            max-width: 95vw;
        }

        #velocity-control-card:not(.c12-rail-joy-card) {
             bottom: calc(var(--spacing-lg) + 130px + env(safe-area-inset-bottom));
             transform: scale(0.9);
             transform-origin: bottom left;
        }
    }
}

/* ==================== 移动设备 (< 768px) ==================== */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
        --topbar-height: 52px;
        --control-panel-width: clamp(240px, 28vw, 280px);
    }
    
    .app-container {
        flex-direction: column;
    }

    .app-topbar.sidebar,
    .sidebar.app-topbar {
        position: relative;
        height: var(--topbar-height);
        padding: 0 10px;
        gap: 10px;
    }

    .app-topbar__brand {
        font-size: 14px;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-btn {
        min-width: 0;
        padding: 4px 8px;
        height: 36px;
        font-size: 11px;
    }

    .sidebar-btn > span {
        display: none;
    }
    
    .main-content {
        height: auto;
        flex: 1;
        min-height: 0;
    }

    .robot-quick-actions-rail {
        left: var(--spacing-md);
        top: auto;
        bottom: calc(var(--spacing-lg) + 200px + env(safe-area-inset-bottom));
        transform: none;
        width: min(180px, 72vw);
    }
    
    /* 小屏：仍悬浮叠卡片，仅收窄宽度 */
    .control-panel,
    .control-panel.app-right-rail {
        position: fixed !important;
        top: calc(var(--topbar-height) + 8px) !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        width: var(--control-panel-width);
        max-height: calc(100dvh - var(--topbar-height) - 16px - 80px);
        overflow-y: auto;
        border-radius: 0;
        background: transparent;
        padding: 0;
        z-index: 400 !important;
    }
    
    .mode-switch {
        min-height: 44px;
        position: relative;
        margin-bottom: 3px;
    }
    
    /* 卡片间距调整 */
    .card {
        padding: var(--spacing-md);
    }
    
    /* 方向控制盘调整 */
    .direction-pad {
        width: 100px;
        height: 100px;
    }
    
    .direction-btn {
        width: 36px;
        height: 36px;
    }

    /* 机器狗控制栏适配 */
    .robot-control-bar {
        /* 增加底部距离：由 60px 增加到 100px，防止被平板底部导航条或浏览器UI遮挡 */
        bottom: calc(var(--spacing-md) + 100px + env(safe-area-inset-bottom)); 
        padding: var(--spacing-xs);
        gap: 2px;
        width: 95%; /* 尽可能占满宽度 */
    }
    
    .robot-control-bar .toolbar-btn {
        flex-direction: column;
        padding: 4px 6px;
        min-width: 40px;
    }

    .robot-control-bar--compact .toolbar-btn > span:not(.rcb-dropdown-trigger-row) {
        display: block;
        font-size: 9px;
    }
    
    .direction-btn svg {
        width: 18px;
        height: 18px;
    }
    
    /* 隐藏部分显示选项 */
    .display-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .option-btn {
        min-height: 48px;
        white-space: normal;
    }
}

/* ==================== 小屏手机 (< 480px) ==================== */
@media (max-width: 480px) {
    .control-panel {
        max-height: 50vh;
    }
    
    .robot-status {
        gap: var(--spacing-xs);
    }

    .robot-status-pose,
    .robot-status-meta {
        gap: var(--spacing-xs);
    }
    
    .status-value {
        font-size: 16px;
    }
    
    .speed-value {
        font-size: 18px;
    }
    
    .option-btn {
        font-size: 11px;
        min-height: 44px;
        padding: 6px 8px;
    }
}

/* ==================== 横屏模式 ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    .app-topbar.sidebar,
    .sidebar.app-topbar {
        position: relative;
        width: 100%;
        height: var(--topbar-height);
        flex-direction: row;
        border-right: none;
    }

    .main-content {
        height: auto;
        margin-left: 0;
        flex: 1;
        min-height: 0;
    }
    
    .control-panel,
    .control-panel.app-right-rail {
        position: fixed !important;
        top: calc(var(--topbar-height) + var(--spacing-md)) !important;
        right: var(--spacing-md) !important;
        bottom: auto !important;
        left: auto !important;
        width: var(--control-panel-width);
        max-width: var(--control-panel-width);
        max-height: calc(100dvh - var(--topbar-height) - var(--spacing-md) * 2);
        height: auto;
        background: transparent;
        padding: 0;
        z-index: 400 !important;
    }
    
    .mode-switch {
        min-height: 44px;
        position: relative;
        z-index: 10;
        margin-bottom: 3px;
        left: auto;
        right: auto;
        width: auto;
    }
}

/* ==================== 触摸设备优化 ==================== */
@media (hover: none) and (pointer: coarse) {
    /* 增大触摸目标 */
    .sidebar-btn,
    .direction-btn {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
    
    .option-btn {
        min-height: 48px;
    }
    
    .mode-btn {
        min-height: var(--touch-target);
    }
    
    /* 禁用 hover 效果 */
    .sidebar-btn:hover,
    .option-btn:hover,
    .direction-btn:hover {
        background-color: inherit;
        color: inherit;
        border-color: inherit;
    }
    
    .sidebar-btn.active:hover {
        background-color: var(--bg-card);
        color: var(--primary-color);
    }
    
    .option-btn.active:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--bg-dark);
    }

    .layer-popover-btn {
        min-width: 48px;
        min-height: 40px;
    }
}

/* ==================== 高分辨率屏幕 ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .status-dot {
        width: 8px;
        height: 8px;
    }
}

/* ==================== 深色模式偏好 ==================== */
@media (prefers-color-scheme: dark) {
    /* 已经是深色主题，无需额外处理 */
}

/* ==================== 减少动画偏好 ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loading-spinner {
        animation: none;
        border-top-color: var(--primary-color);
    }
    
    .status-dot {
        animation: none;
    }
}

/* ==================== 三栏布局：平板 / 中等屏流体适配（禁止整体 scale） ==================== */
@media (max-width: 1366px) {
    :root {
        --topbar-height: 48px;
        /* 左栏流体；右栏宽对齐狗上 2D */
        --media-rail-width: clamp(232px, 24vw, 280px);
        --control-panel-width: 300px;
        --bottom-bar-clearance: 64px;
        --right-rail-gap: 8px;
    }

    .app-topbar.sidebar,
    .sidebar.app-topbar {
        height: var(--topbar-height);
        min-height: var(--topbar-height);
        padding: 0 10px;
        gap: 8px;
    }

    .app-topbar__brand {
        font-size: 15px;
    }

    .sidebar-btn {
        height: 36px;
        min-width: 48px;
        padding: 4px 8px;
        font-size: 12px;
    }

    .sidebar-btn svg {
        width: 17px;
        height: 17px;
    }

    .c12-media-rail,
    .c12-media-rail.app-left-rail {
        width: var(--media-rail-width);
        min-width: 0;
        max-width: var(--media-rail-width);
        padding: 6px;
        gap: 5px;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .c12-rail-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        gap: 6px;
    }

    .c12-rail-section__title {
        font-size: 11px;
    }

    .c12-rail-detect-group {
        gap: 5px;
    }

    .c12-rail-detect-group .c12-detect-toggle {
        min-height: 36px;
        padding: 7px 4px;
        font-size: 12px;
    }

    .c12-rail-view-tools {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
    }

    .c12-rail-view-tools > .toolbar-btn,
    .c12-rail-view-tools .toolbar-dropdown-trigger {
        min-height: 38px;
        font-size: 9px !important;
        padding: 4px 1px !important;
    }

    .c12-media-rail .c12-rail-robot .toolbar-btn,
    .c12-media-rail #c12-rail-robot .toolbar-btn {
        min-height: 42px !important;
        padding: 6px 2px !important;
        font-size: 11px !important;
        gap: 2px !important;
    }

    .c12-media-rail .c12-rail-robot .toolbar-btn svg,
    .c12-media-rail #c12-rail-robot .toolbar-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .c12-rail-joy-section {
        flex: 0 0 auto;
        padding: 4px 2px calc(6px + env(safe-area-inset-bottom, 0px));
    }

    .c12-rail-joy-section .c12-rail-section__title {
        text-align: center;
    }

    /* 平板：保持 2D thumb 叠层，勿放大标题栏 */
    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) .c12-media-card__foot {
        display: none !important;
    }

    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) .c12-media-card__head {
        min-height: 0 !important;
        padding: 4px 4px 4px 6px !important;
        background: transparent !important;
        border-bottom: none !important;
    }

    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) .c12-media-card__title {
        font-size: 10px !important;
        font-weight: 500 !important;
    }

    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) .video-status {
        display: inline-flex !important;
        font-size: 9px !important;
    }

    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) .video-panel-btn,
    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) .c12-video-enlarge-btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        border-radius: 4px !important;
    }

    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) .c12-video-enlarge-btn svg,
    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) .video-panel-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) {
        max-height: min(96px, 14vh);
    }

    .c12-media-rail .c12-rail-previews .video-panel-body.video-panel-body-c12-single {
        max-height: none !important;
        min-height: 0 !important;
    }

    .c12-media-rail #velocity-control-card,
    .c12-media-rail .c12-rail-joy-card {
        padding: 6px 4px !important;
    }

    .c12-media-rail #velocity-control-card .speed-readout {
        font-size: 10px;
    }

    .c12-media-rail #velocity-control-card .wheel-wrapper,
    .c12-media-rail #velocity-control-card .c12-ptz-joystick-wrap,
    .c12-media-rail #velocity-control-card .joystick-base,
    .c12-media-rail #velocity-control-card .c12-ptz-joystick-base {
        width: 68px !important;
        height: 68px !important;
    }

    .c12-media-rail #velocity-control-card .joystick-knob,
    .c12-media-rail #velocity-control-card .c12-ptz-joystick-knob {
        width: 30px !important;
        height: 30px !important;
    }

    .c12-media-rail #velocity-control-card .velocity-gimbal-wrap {
        gap: 18px;
        align-items: flex-end;
        justify-content: center;
    }

    .control-panel,
    .control-panel.app-right-rail {
        position: fixed !important;
        top: calc(var(--topbar-height) + var(--spacing-lg)) !important;
        right: var(--spacing-lg) !important;
        bottom: auto !important;
        left: auto !important;
        width: var(--control-panel-width);
        min-width: 0;
        max-width: var(--control-panel-width);
        height: auto;
        max-height: calc(100dvh - var(--topbar-height) - var(--spacing-lg) * 2 - var(--bottom-bar-clearance, 64px));
        transform: none !important;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        gap: 8px;
        border-radius: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        z-index: 400 !important;
    }

    .control-panel .card {
        padding: 10px 12px !important;
        border-radius: 10px;
    }

    .control-panel .tm-rail-card .tm-float-body,
    .control-panel #tm-float-panel.tm-rail-card .tm-float-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: 4px;
    }

    .control-panel .launch-stack-actions--grid {
        gap: 6px;
    }

    .control-panel .launch-stack-actions--grid .robot-quick-action-btn,
    .control-panel .robot-quick-action-btn {
        padding: 8px 8px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        min-height: 0 !important;
        letter-spacing: 0.01em;
        font-weight: 600;
    }

    .control-panel .launch-stack-card .card-title,
    .control-panel #launch-stack-card .launch-stack-card__head,
    .control-panel .launch-stack-card__label {
        margin-bottom: 6px;
        font-size: 12px !important;
        font-weight: 500;
    }

    .control-panel .robot-status-card-head-actions .status-text {
        display: none !important;
    }

    .control-panel .robot-status-strip #robot-task-status {
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
        font-size: 12px;
    }

    .control-panel .mode-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        font-weight: 500;
        min-height: 0;
    }

    .control-panel .layer-popover-btn {
        min-width: 44px;
        font-size: 12px !important;
        font-weight: 600;
        padding: 0 8px;
    }

    .control-panel .status-label {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .control-panel .status-value {
        font-size: 13px !important;
        font-weight: 600;
    }

    .control-panel .robot-status-pose,
    .control-panel .robot-status-meta {
        gap: 6px;
    }

    /* 全宽底侧栏：禁止居中悬浮覆盖 */
    .main-content .toolbar.toolbar--bottom,
    .main-content .toolbar.toolbar--bottom.app-bottom-dock,
    .toolbar.toolbar--bottom {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        min-height: var(--bottom-bar-clearance);
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 0 !important;
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.28);
    }

    .app-bottom-dock__inner {
        min-height: 58px;
        padding: 5px 8px;
        gap: 6px;
        justify-content: center;
        justify-content: safe center;
    }

    .main-content .toolbar.toolbar--bottom.toolbar--compact .toolbar-btn,
    .toolbar--compact.toolbar--bottom .toolbar-btn {
        min-width: 54px;
        padding: 4px 5px;
        font-size: 11px;
        gap: 2px;
    }

    .main-content .toolbar.toolbar--bottom.toolbar--compact .toolbar-btn svg,
    .main-content .toolbar.toolbar--bottom.toolbar--compact .toolbar-dropdown-trigger .toolbar-dropdown-main-icon,
    .toolbar--compact.toolbar--bottom .toolbar-btn svg,
    .toolbar--compact.toolbar--bottom .toolbar-dropdown-trigger .toolbar-dropdown-main-icon {
        width: 20px;
        height: 20px;
    }

    .main-content .toolbar.toolbar--bottom.toolbar--compact .toolbar-btn > span:not(.toolbar-dropdown-trigger-row),
    .toolbar--compact.toolbar--bottom .toolbar-btn > span:not(.toolbar-dropdown-trigger-row) {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .main-content .toolbar.toolbar--bottom .toolbar-divider {
        height: 32px;
        margin: 0 4px;
    }

    .robot-control-bar {
        transform: none !important;
    }
}

/* 矮屏横屏平板（常见工业平板浏览器栏占高） */
@media (max-height: 800px) and (orientation: landscape) {
    :root {
        --topbar-height: 44px;
        --bottom-bar-clearance: 58px;
    }

    .app-bottom-dock__inner {
        min-height: 52px;
        padding: 4px 8px;
        justify-content: center;
        justify-content: safe center;
    }

    .c12-media-rail .c12-rail-previews > .video-panel.c12-media-card:not(.floating) {
        max-height: min(72px, 12vh);
    }

    .c12-media-rail .c12-rail-previews .video-panel-body.video-panel-body-c12-single {
        max-height: none !important;
        min-height: 0 !important;
    }

    .c12-media-rail #velocity-control-card .wheel-wrapper,
    .c12-media-rail #velocity-control-card .c12-ptz-joystick-wrap,
    .c12-media-rail #velocity-control-card .joystick-base,
    .c12-media-rail #velocity-control-card .c12-ptz-joystick-base {
        width: 60px !important;
        height: 60px !important;
    }

    .c12-media-rail #velocity-control-card .joystick-knob,
    .c12-media-rail #velocity-control-card .c12-ptz-joystick-knob {
        width: 26px !important;
        height: 26px !important;
    }

    .c12-rail-section__title {
        font-size: 10px;
        margin: 0;
    }

    /* 矮屏仍保持可点：不要压到 8px */
    .c12-media-rail .c12-rail-robot .toolbar-btn,
    .c12-media-rail #c12-rail-robot .toolbar-btn {
        min-height: 36px !important;
        font-size: 10px !important;
        padding: 4px 1px !important;
    }

    .c12-media-rail .c12-rail-robot .toolbar-btn svg,
    .c12-media-rail #c12-rail-robot .toolbar-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* 矮屏横屏：继续压字号，勿放大（此前 14px 会盖掉 2D 密度） */
    .control-panel .launch-stack-actions--grid .robot-quick-action-btn,
    .control-panel .robot-quick-action-btn {
        padding: 7px 8px !important;
        font-size: 12px !important;
        min-height: 0 !important;
        border-radius: 10px !important;
    }

    .control-panel .card-title,
    .control-panel .launch-stack-card__label,
    .control-panel .tm-float-title {
        font-size: 12px !important;
    }

    .control-panel .status-value {
        font-size: 12px !important;
    }

    .control-panel .robot-status-strip__bat,
    .control-panel .robot-status-strip #robot-task-status {
        font-size: 12px !important;
    }
}

@media (max-width: 1024px) {
    :root {
        --topbar-height: 44px;
        --media-rail-width: clamp(210px, 25vw, 252px);
        --control-panel-width: 260px;
        --bottom-bar-clearance: 60px;
        --right-rail-gap: 6px;
    }

    .c12-media-rail,
    .c12-media-rail.app-left-rail {
        width: var(--media-rail-width);
        max-width: var(--media-rail-width);
        padding: 5px;
        gap: 4px;
    }

    .control-panel .card {
        padding: 12px 14px;
    }

    .control-panel .option-btn,
    .control-panel .launch-btn {
        padding: 8px 10px;
        font-size: 13px;
        min-height: 38px;
    }

    .control-panel .launch-stack-actions--grid .robot-quick-action-btn,
    .control-panel .robot-quick-action-btn {
        padding: 12px 10px;
        font-size: 14px;
        min-height: 40px;
    }

    .toolbar.toolbar--bottom.has-nav-session {
        min-height: calc(var(--bottom-bar-clearance) + 44px);
    }

    .toolbar-nav-session .toolbar-btn {
        min-width: 64px;
        font-size: 10px;
    }

    .mode-btn {
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 700;
        min-height: 40px;
    }

    .main-content .toolbar.toolbar--bottom.app-bottom-dock {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    .app-bottom-dock__inner {
        min-height: 54px;
        padding: 4px 6px;
        gap: 4px;
        justify-content: center;
        justify-content: safe center;
    }

    /* 小屏平板：保持可读，靠横向滚动而不是缩到看不清 */
    .main-content .toolbar.toolbar--bottom.toolbar--compact .toolbar-btn,
    .toolbar--compact.toolbar--bottom .toolbar-btn {
        min-width: 50px;
        padding: 4px 4px;
        font-size: 10px;
    }

    .main-content .toolbar.toolbar--bottom.toolbar--compact .toolbar-btn svg,
    .main-content .toolbar.toolbar--bottom.toolbar--compact .toolbar-dropdown-trigger .toolbar-dropdown-main-icon,
    .toolbar--compact.toolbar--bottom .toolbar-btn svg {
        width: 18px;
        height: 18px;
    }

    .main-content .toolbar.toolbar--bottom.toolbar--compact .toolbar-btn > span:not(.toolbar-dropdown-trigger-row),
    .toolbar--compact.toolbar--bottom .toolbar-btn > span:not(.toolbar-dropdown-trigger-row) {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }
}

/* 平板竖屏：左栏改为顶部区域，遥控仍钉在左栏区底部 */
@media (max-width: 1024px) and (orientation: portrait) {
    :root {
        --media-rail-width: 100%;
        --control-panel-width: min(280px, calc(100% - 16px));
        --bottom-bar-clearance: 68px;
    }

    .app-workspace {
        flex-direction: column;
    }

    .c12-media-rail,
    .c12-media-rail.app-left-rail {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        max-height: min(46vh, 420px);
        flex-direction: column;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .c12-rail-main {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }

    .c12-rail-previews {
        flex: 1 1 48%;
        min-width: 140px;
        flex-direction: row;
        gap: 6px;
    }

    .c12-rail-previews > .video-panel {
        flex: 1 1 0;
        min-width: 0;
    }

    .c12-rail-controls {
        flex: 1 1 48%;
        min-width: 140px;
    }

    .c12-rail-joy-section {
        flex: 0 0 auto;
        width: 100%;
    }

    .main-content {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    .control-panel,
    .control-panel.app-right-rail {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        max-height: min(40vh, 360px);
        border-left: none;
        border-top: 1px solid var(--border-color);
        order: 3;
    }
}

/* =========================================================================
   全平台通用样式 (Global Styles for Velocity Control)
   默认应用左侧悬浮布局，确保平板横竖屏表现一致
   ========================================================================= */

/* 地图浮层摇杆（仅当未迁入第二侧栏时） */
#velocity-control-card:not(.c12-rail-joy-card) {
    position: fixed !important;
    left: calc(var(--sidebar-width) + 25px) !important;
    right: auto !important;
    top: auto !important;
    bottom: 80px !important;
    z-index: 9999 !important;
    display: block !important;
    width: auto !important;
    max-width: min(280px, 94vw);
    height: auto !important;
    background: rgba(var(--bg-panel-rgb), 0.72) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 6px 8px !important;
    margin: 0 !important;
    box-shadow: var(--shadow-md);
    transform: scale(0.95);
    transform-origin: bottom left;
    overflow: visible !important;
}

/* 隐藏卡片标题和多余元素 */
#velocity-control-card .card-title,
#velocity-control-card .card-header {
    display: none !important;
}

/* 内部内边距清零 */
#velocity-control-card .speed-control {
    padding: 0 !important;
    margin: 0 !important;
}

/* -------------------------------------------------------------------------
   2. 桌面端 (Desktop/PC) - 传统右侧悬浮布局
   使用 hover: hover 判断鼠标设备，且屏幕较宽
   ------------------------------------------------------------------------- */
@media (hover: hover) and (min-width: 1025px) {
    #velocity-control-card:not(.c12-rail-joy-card) {
        position: fixed !important;
        left: auto !important;
        right: 20px !important;
        top: auto !important;
        bottom: 72px !important;
        z-index: 9999 !important;
        display: block !important;
        width: auto !important;
        max-width: min(280px, 94vw);
        background: rgba(var(--bg-panel-rgb), 0.92) !important;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 6px 8px !important;
        box-shadow: var(--shadow-lg);
        transform: none !important;
        overflow: visible !important;
    }
}

/* -------------------------------------------------------------------------
   3. 移动端横屏/小高度屏幕优化 (Mobile Landscape / Short Screen)
   解决右侧面板看不全、左侧摇杆过大的问题
   通常手机横屏高度在 300px - 500px 之间
   ------------------------------------------------------------------------- */
@media (max-height: 600px) {
    #velocity-control-card:not(.c12-rail-joy-card) {
        transform: scale(0.65) !important;
        transform-origin: bottom left;
        bottom: 40px !important;
        left: 85px !important;
    }

    /* 矮屏：保持悬浮叠卡片，仅降低高度与字号 */
    .control-panel,
    .control-panel.app-right-rail {
        position: fixed !important;
        top: calc(var(--topbar-height) + 8px) !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        overflow-y: auto !important;
        max-height: calc(100dvh - var(--topbar-height) - 16px - 56px) !important;
        gap: 8px !important;
        width: var(--control-panel-width) !important;
        min-width: 0 !important;
        max-width: var(--control-panel-width) !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 400 !important;
    }

    .control-panel-topbar {
        flex-wrap: nowrap;
    }

    .control-panel .card {
        padding: 8px 10px !important;
        margin-bottom: 0 !important;
    }

    .control-panel .option-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    .control-panel .status-label {
        font-size: 10px !important;
    }

    .control-panel .status-value {
        font-size: 12px !important;
    }

    .control-panel .card-title,
    .control-panel .launch-stack-card__label,
    .control-panel .tm-float-title {
        font-size: 12px !important;
    }

    .mode-switch {
        min-height: 32px !important;
        padding: 2px !important;
    }

    .mode-btn {
        padding: 5px 8px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    .control-panel .launch-stack-actions--grid .robot-quick-action-btn,
    .control-panel .robot-quick-action-btn {
        padding: 7px 8px !important;
        font-size: 12px !important;
        min-height: 0 !important;
    }
}

/* 针对触屏/平板竖屏 (Portrait) — 仅地图浮层摇杆 */
@media (orientation: portrait) {
    #velocity-control-card:not(.c12-rail-joy-card) {
        bottom: 110px !important;
        left: 85px !important;
        transform: scale(0.85);
    }
}

@media (orientation: landscape) and (max-width: 1024px) {
    #velocity-control-card:not(.c12-rail-joy-card) {
        bottom: 60px !important;
        left: 85px !important;
    }
}

/* 右栏字号全局压到 2D 密度（不依赖媒体查询，避免宽屏/矮屏回弹变大） */
.control-panel .mode-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 0 !important;
}

.control-panel .layer-popover-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
}

.control-panel .card-title,
.control-panel .launch-stack-card__label,
.control-panel .tm-float-title,
.control-panel #launch-stack-card .launch-stack-card__head {
    font-size: 12px !important;
    font-weight: 500 !important;
}

.control-panel .launch-stack-actions--grid .robot-quick-action-btn,
.control-panel .robot-quick-action-btn {
    padding: 8px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    min-height: 0 !important;
    letter-spacing: 0.01em !important;
}

.control-panel .status-label {
    font-size: 10px !important;
}

.control-panel .status-value,
.control-panel .robot-status-strip__bat,
.control-panel .robot-status-strip #robot-task-status {
    font-size: 12px !important;
}

.control-panel .tm-status,
.control-panel .tm-progress-text,
.control-panel .tm-empty {
    font-size: 11px !important;
}