/* ============================================= */
/* 4. Bottom Function Bars - 横向滚动支持        */
/* ============================================= */
.function-bar-top {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    /* 改为左对齐以支持滚动 */
    align-items: center;
    padding: 10px 15px;
    background-color: var(--md-sys-color-background);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 5;
    gap: 8px;
    user-select: none;

    /* 横向滚动支持 */
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    /* 不换行 */
    scroll-behavior: smooth;
    /* 平滑滚动 */
    -webkit-overflow-scrolling: touch;
    /* iOS 平滑滚动 */
}

/* 美化滚动条 (仅桌面端显示) */
.function-bar-top::-webkit-scrollbar {
    height: 4px;
}

.function-bar-top::-webkit-scrollbar-track {
    background: transparent;
}

.function-bar-top::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.function-bar-top::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.function-bar-top>*:last-child {
    margin-right: 0;
    /* 最后一个按钮右边距为0 */
}

/* Reset auto margin */
.function-tile {
    height: 36px;
    background-color: var(--md-sys-color-surface-variant);
    border: none;
    border-radius: var(--radius-full);
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 16px;
    font-weight: 500;
    flex-shrink: 0;
    /* 防止按钮被压缩 */
    min-width: fit-content;
    /* 确保按钮内容完整显示 */
    white-space: nowrap;
    /* 文字不换行 */
}

.function-tile:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--md-sys-color-on-surface);
}

.function-tile.active {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}